/* Rain Radar – frontend styles */

/* -------------------------------------------------------------------------
 * Design tokens -- single source of truth for color/radius/shadow/motion
 * across every element below, so "consistent" is enforced structurally
 * instead of by remembering the right magic number each time.
 * ------------------------------------------------------------------------- */
:root {
	--rdr-blue:         #2563eb;
	--rdr-blue-dark:    #1d4ed8;
	--rdr-text:         #1e293b;
	--rdr-text-muted:   #4a5568;
	--rdr-text-soft:    #718096;
	--rdr-surface:      #ffffff;
	--rdr-surface-alt:  #f1f5f9;
	--rdr-surface-alt-hover: #e2e8f0;
	--rdr-surface-map:  #eef2f5;
	--rdr-radius-pill:  999px;
	--rdr-past:         #c2ccd8; /* already measured */
	--rdr-future:       #a9caf7; /* would be nowcast -- kept clearly apart from
	                                  --rdr-past, the colour change being the
	                                  only thing marking the boundary now */
	--rdr-boundary:     #94a3b8; /* midnight */
	--rdr-now:          #16a34a; /* observed / forecast divider */
	/* Rounded again, deliberately (2026-09-01). Corners were flattened to 0
	   back when the widget mixed several unrelated radii and the fix was to
	   pick one value everywhere; zero was simply the easiest one to be
	   consistent about. The Material 3 pass has since given the timeline a
	   genuinely rounded language -- a 16px rail, a pill badge, a pill handle
	   -- and sharp panels around it now read as the odd element. This is one
	   scale, applied everywhere, so the original complaint stays fixed. */
	--rdr-radius-btn:   12px; /* icon buttons, play */
	--rdr-radius-card:  14px; /* legend, dropdown, popover, toast */
	--rdr-radius-map:   14px; /* the map panel itself */
	--rdr-radius-outer: 18px; /* the widget shell */
	--rdr-shadow-float: 0 1px 4px rgba(0, 0, 0, .12);
	--rdr-shadow-pop:   0 4px 16px rgba(0, 0, 0, .18);
	--rdr-ease:         .15s ease;
}

/* -------------------------------------------------------------------------
 * Container -- a column of rows: search bar (+ geolocate), map, timeline.
 * Legend and attribution are small enough to float directly on the map.
 * Only the first and last rows touch the widget's own rounded corners
 * (search-bar on top, timeline on bottom) since the map sits sandwiched
 * between them now and never touches the outer edge itself -- this also
 * sidesteps a real cross-browser quirk where a WebGL canvas (MapLibre's
 * map surface) can ignore an ancestor's overflow:hidden/border-radius clip
 * at the exact edge it touches, which is why corners looked inconsistently
 * rounded before this layout existed.
 * ------------------------------------------------------------------------- */
.rdr-wrap {
	position:      relative;
	display:       flex;
	flex-direction: column;
	width:         100%;
	min-height:    280px;
	overflow:      hidden;
	border-radius: var( --rdr-radius-outer );
	margin:        1.5em 0;
	background:    var( --rdr-surface ); /* white like the rows above and
	                                       below -- the map is an inset panel
	                                       now, and the old map-grey showed as
	                                       a band beside it */
	font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* Host-theme shield (2026-09-01) -- see the matching note in
	   map-widget.css. The live site wraps post content in `.entry.themeform`,
	   whose `line-height: 1.6em` computes to 24px and inherits into every
	   descendant; these labels are 11px, so that silently changed their line
	   boxes. Declared here so the theme cannot reach in. */
	line-height: 1.45;
	font-weight: 400;
	color:       var( --rdr-text );
}

/* The map itself carries no shadow -- only the widget's own rounded corners
 * (above) apply to it. Floating UI cards drawn over the map keep their
 * subtle shadows for legibility against varying map colors underneath. */

/* Inset so its own rounding is actually visible, and so the shell's corners
 * are never drawn by a WebGL canvas -- a known cross-browser weak point where
 * a GPU-composited surface can ignore an ancestor's border-radius clip at the
 * exact edge it touches. The map now never reaches that edge. */
.rdr-map-area {
	position: relative;
	flex:     1 1 auto;
	min-height: 0;
	overflow: hidden;
	margin:   0 10px;
	border-radius: var( --rdr-radius-map );
}

.rdr-map {
	width:  100%;
	height: 100%;
	flex:   1 1 auto;
	min-height: 0;
}

/* -------------------------------------------------------------------------
 * Loading / unavailable states
 * ------------------------------------------------------------------------- */
.rdr-loading,
.rdr-unavailable {
	position:        absolute;
	inset:           0;
	z-index:         10;
	background:      var( --rdr-surface-map );
	display:         flex;
	align-items:     center;
	justify-content: center;
	text-align:      center;
	padding:         1.5em;
	color:           var( --rdr-text-muted );
	font-size:       .9375rem;
}

.rdr-spinner {
	width:        34px;
	height:       34px;
	border:       3px solid rgba(45, 55, 72, .15);
	border-top-color: var( --rdr-blue );
	border-radius: 50%;
	animation:    rdr-spin .8s linear infinite;
}

@keyframes rdr-spin {
	to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
 * Error message (shown to editors only, above the widget)
 * ------------------------------------------------------------------------- */
.rdr-error {
	padding:       .6em 1em;
	border-left:   4px solid #d63638;
	background:    #fff8f8;
	color:         #d63638;
	font-size:     .875rem;
	border-radius: 0 4px 4px 0;
	margin:        1em 0;
}

/* -------------------------------------------------------------------------
 * Search bar -- its own row ABOVE the map (normal document flow, not an
 * overlay). Search needs real width to be usable, so it doesn't compete
 * with the map's own content the way a floating box would.
 * ------------------------------------------------------------------------- */
.rdr-search-bar {
	position:        relative; /* anchors the geolocate status toast below */
	flex:            0 0 auto;
	display:         flex;
	align-items:     center;
	gap:             8px;
	padding:         8px 10px;
	background:      var( --rdr-surface );
	border-top-left-radius:  var( --rdr-radius-outer );
	border-top-right-radius: var( --rdr-radius-outer );
}

.rdr-search-box {
	position: relative;
	flex:     1 1 auto;
	max-width: 320px;
}

.rdr-search-input {
	width:           100%;
	box-sizing:      border-box;
	/* Reset native OS/browser chrome -- iOS Safari and some Android
	   browsers paint text inputs with their own rounded-rect widget skin
	   that ignores the page's border-radius entirely unless appearance is
	   explicitly turned off, which is why this kept looking "square" no
	   matter what radius was set here. */
	appearance:         none;
	-webkit-appearance: none;
	background:      var( --rdr-surface-alt );
	border:          none;
	border-radius:   var( --rdr-radius-pill );
	padding:         8px 14px;
	font-size:       .8125rem;
	color:           var( --rdr-text );
	transition:      background-color var( --rdr-ease ), box-shadow var( --rdr-ease );
}

.rdr-search-input:hover   { background: var( --rdr-surface-alt-hover ); }

.rdr-search-input:focus {
	background: var( --rdr-surface );
	outline:    2px solid var( --rdr-blue );
	outline-offset: 1px;
}

.rdr-search-results {
	position:      absolute;
	top:           calc(100% + 4px);
	left:          0;
	right:         0;
	background:    var( --rdr-surface );
	border-radius: var( --rdr-radius-card );
	box-shadow:    var( --rdr-shadow-pop );
	max-height:    220px;
	overflow-y:    auto;
	display:       none;
	z-index:       4;
	opacity:       0;
	transform:     translateY(-4px);
	transition:    opacity var( --rdr-ease ), transform var( --rdr-ease );
}

.rdr-search-results.is-open {
	display:   block;
	opacity:   1;
	transform: translateY(0);
}

.rdr-search-item {
	padding:    8px 12px;
	font-size:  .8125rem;
	cursor:     pointer;
	border-bottom: 1px solid #f1f1f1;
	transition: background-color var( --rdr-ease );
}

.rdr-search-item:first-child { border-top-left-radius: var( --rdr-radius-card ); border-top-right-radius: var( --rdr-radius-card ); }
.rdr-search-item:last-child  { border-bottom: none; border-bottom-left-radius: var( --rdr-radius-card ); border-bottom-right-radius: var( --rdr-radius-card ); }
.rdr-search-item:hover       { background: #f5f8ff; }

/* -------------------------------------------------------------------------
 * Compact icon buttons -- the only chrome allowed to float directly on top
 * of the map itself, since a small circle in a corner doesn't meaningfully
 * cover map content the way a search bar or timeline would.
 * ------------------------------------------------------------------------- */
.rdr-icon-btn {
	background:      rgba(255, 255, 255, .92);
	backdrop-filter: blur(4px);
	border:          none;
	border-radius:   var( --rdr-radius-btn );
	width:           34px;
	height:          34px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	box-shadow:      var( --rdr-shadow-float );
	font-size:       15px;
	line-height:     1;
	flex-shrink:     0;
	transition:      background-color var( --rdr-ease ), transform var( --rdr-ease );
}

.rdr-icon-btn:hover   { background: var( --rdr-surface ); }
.rdr-icon-btn:active  { transform: scale(.92); }
.rdr-icon-btn svg     { color: var( --rdr-blue ); }

/* Search + geolocate live outside the map on plain white, so a translucent
 * blur reads as a rendering glitch rather than "floating over content" --
 * give them a flat, solid version of the same button instead. */
.rdr-search-bar .rdr-icon-btn {
	background:      var( --rdr-surface-alt );
	backdrop-filter: none;
	box-shadow:      none;
}

.rdr-search-bar .rdr-icon-btn:hover { background: var( --rdr-surface-alt-hover ); }

.rdr-geolocate-btn.is-locating svg {
	animation: rdr-pulse 1s ease-in-out infinite;
}

@keyframes rdr-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

.rdr-geo-status {
	position:        absolute;
	top:             100%;
	left:            10px;
	right:           10px;
	margin-top:      6px;
	z-index:         5;
	background:      rgba(30, 41, 59, .92);
	color:           #fff;
	font-size:       .75rem;
	padding:         6px 12px;
	border-radius:   var( --rdr-radius-card );
	opacity:         0;
	pointer-events:  none;
	transform:       translateY(-4px);
	transition:      opacity .2s ease, transform .2s ease;
}

.rdr-geo-status.is-visible {
	opacity:   1;
	transform: translateY(0);
}

/* -------------------------------------------------------------------------
 * Rain-loading badge -- small and non-blocking (unlike the earlier
 * full-cover spinner this replaced): says the rain layer specifically is
 * still loading, without hiding the already-usable map/chrome behind it.
 * ------------------------------------------------------------------------- */
.rdr-rain-loading {
	position:        absolute;
	top:             10px;
	left:            10px;
	z-index:         3;
	display:         flex;
	align-items:     center;
	gap:             6px;
	background:      rgba(255, 255, 255, .92);
	backdrop-filter: blur(4px);
	border-radius:   var( --rdr-radius-pill );
	padding:         5px 10px;
	font-size:       .6875rem;
	color:           var( --rdr-text-muted );
	box-shadow:      var( --rdr-shadow-float );
}

.rdr-rain-loading-spinner {
	width:         11px;
	height:        11px;
	border:        2px solid rgba(45, 55, 72, .2);
	border-top-color: var( --rdr-blue );
	border-radius: 50%;
	animation:     rdr-spin .8s linear infinite;
	flex-shrink:   0;
}

/* -------------------------------------------------------------------------
 * Legend -- also a compact on-map overlay
 * ------------------------------------------------------------------------- */
.rdr-legend {
	position:        absolute;
	top:             10px;
	right:           10px;
	z-index:         3;
	background:      rgba(255, 255, 255, .92);
	backdrop-filter: blur(4px);
	border-radius:   var( --rdr-radius-card );
	padding:         9px 11px;
	box-shadow:      var( --rdr-shadow-float );
	font-size:       .6875rem;
	color:           var( --rdr-text );
}

.rdr-legend-item {
	display:     flex;
	align-items: center;
	gap:         6px;
	padding:     3px 0;
	white-space: nowrap;
}

.rdr-legend-swatch {
	width:       10px;
	height:      10px;
	flex-shrink: 0;
}

.rdr-legend-range {
	color: var( --rdr-text-soft );
	margin-left: 2px;
}

/* -------------------------------------------------------------------------
 * Attribution -- a small always-visible icon on the map (hard requirement:
 * must stay persistently reachable, never hidden behind a setting) that
 * opens the full source/license list on click. Small enough to sit
 * directly on the map, same as the legend.
 * ------------------------------------------------------------------------- */
.rdr-attrib-wrap {
	position: absolute;
	left:     10px;
	bottom:   10px;
	z-index:  3;
}

.rdr-attribution-btn {
	color:       var( --rdr-blue );
	font-weight: 700;
	font-size:   16px;
}

.rdr-attribution-panel {
	position:      absolute;
	left:          0;
	bottom:        calc(100% + 8px);
	z-index:       5;
	background:    var( --rdr-surface );
	border-radius: var( --rdr-radius-card );
	box-shadow:    0 4px 16px rgba(0, 0, 0, .2);
	padding:       12px 14px;
	font-size:     .75rem;
	color:         var( --rdr-text );
	width:         max-content;
	max-width:     min(280px, calc(100vw - 40px));
	display:       none;
	opacity:       0;
	transform:     translateY(4px);
	transition:    opacity var( --rdr-ease ), transform var( --rdr-ease );
}

.rdr-attribution-panel.is-open {
	display:   block;
	opacity:   1;
	transform: translateY(0);
}

.rdr-attribution-panel ul {
	margin:  8px 0 0;
	padding: 0 0 0 16px;
}

.rdr-attribution-panel li { margin-bottom: 4px; }
.rdr-attribution-panel a  { color: var( --rdr-blue ); }

/* -------------------------------------------------------------------------
 * Timeline + zoom -- one row BELOW the map, normal document flow. This is
 * the bottom-most row, so it carries the widget's bottom corner rounding.
 * ------------------------------------------------------------------------- */
.rdr-timeline {
	flex:            0 0 auto;
	background:      var( --rdr-surface );
	padding:         8px 12px 10px;
	border-bottom-left-radius:  var( --rdr-radius-outer );
	border-bottom-right-radius: var( --rdr-radius-outer );
	display:         flex;
	align-items:     center;
	gap:             10px;
}

/* A rounded square, not a circle: it sits directly beside the Material 3
 * timeline, whose rail, handle and badge are all rounded rectangles. A lone
 * circle there read as a leftover from the previous design. */
.rdr-play-btn {
	width:           34px;
	height:          34px;
	border-radius:   var( --rdr-radius-btn );
	border:          none;
	background:      var( --rdr-blue );
	color:           #fff;
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	flex-shrink:     0;
	font-size:       13px;
	transition:      background-color var( --rdr-ease ), transform var( --rdr-ease );
}

.rdr-play-btn:hover  { background: var( --rdr-blue-dark ); }
.rdr-play-btn:active { transform: scale(.92); }

.rdr-timeline-track {
	flex:     1;
	position: relative;
	padding-top:    40px; /* clears the badge AND the thumb, which rises 7px
	                         above the rail (11px while dragging) -- at 26px
	                         the two overlapped, same defect found and fixed
	                         in the other three widgets */
	padding-bottom: 22px; /* rail -> hour labels, with air between */
}

/* ---- the rail, split where observation ends ----
 * Left of the divider is measured radar, right of it would be nowcast. With
 * the nowcast disabled every frame is observed, so the rail reads as fully
 * "measured" today and the forecast tone appears on its own if it ever comes
 * back -- see forecastStartIndex() in radar.js. Matches .wsm-lead-rail in the
 * other three widgets. */
.rdr-timeline-rail {
	position:      relative;
	height:        16px;
	border-radius: 8px;
	background:    var( --rdr-future );
	overflow:      hidden;
}

.rdr-rail-past {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 0; /* real value set by paintTimelineMarks(), in px */
	background: var( --rdr-past );
}

.rdr-timeline-marks {
	position: absolute;
	left: 0; right: 0;
	top: 40px;
	height: 16px;
	pointer-events: none;
}

/* Material 3 marks a discrete slider's real stops -- here, the actual frames */
.rdr-mark-dot {
	position:  absolute;
	top:       50%;
	width:     3px;
	height:    3px;
	border-radius: 50%;
	background: var( --rdr-surface );
	opacity:   .5;
	transform: translate(-50%, -50%);
}

.rdr-mark-day { /* the live window really does cross midnight once a day */
	position:  absolute;
	top:       50%;
	width:     2px;
	height:    26px; /* stands proud of the rail so it reads as a boundary,
	                    not as part of the track */
	border-radius: 1px;
	background: var( --rdr-boundary );
	transform: translate(-50%, -50%);
}

/* No separate divider line (2026-09-01). With the nowcast disabled it lands
 * on the last frame -- exactly where the handle rests by default -- so the
 * first thing a visitor saw was a blue handle and a green line stacked on
 * each other, reading as a rendering fault. The rail's own colour change
 * already marks the boundary. Same call as .wsm-mark-now in the other three. */
.rdr-mark-now { display: none; }

/* Badge that follows the slider thumb, carrying BOTH the status and the
 * exact time (2026-09-01). Replaces a fixed right-hand time label plus a
 * separate status pill -- neither is in the row's flex flow any more, which
 * structurally ends the layout-shift bug those two kept causing as playback
 * entered and left the live frame. Matches .wsm-lead-badge in the other
 * three widgets so all four products read the same way. */
.rdr-timeline-badge {
	line-height: 1.3;
	position:    absolute;
	top:         0;
	left:        0; /* real value set by positionTimelineBadge(), in px */
	transform:   translateX(-50%);
	background:  var( --rdr-blue );
	color:       #fff;
	font-size:   .6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums; /* no width jitter while scrubbing */
	padding:     3px 9px;
	border-radius: var( --rdr-radius-pill );
	white-space: nowrap;
	pointer-events: none; /* must never swallow a drag aimed at the slider */
}

.rdr-timeline-badge::after { /* pointer tying the badge to the thumb */
	content:   '';
	position:  absolute;
	top:       100%;
	left:      50%;
	transform: translateX(-50%);
	border:    4px solid transparent;
	border-top-color: var( --rdr-blue );
}

.rdr-timeline-badge.is-live {
	background: #16a34a;
}
.rdr-timeline-badge.is-live::after { border-top-color: #16a34a; }

/* Forecast frames must stay unmistakable as forecasts, not observations --
 * a hard project requirement (docs/licensing.md), which is why this is a
 * loud amber AND the badge text says so in words, never colour alone. */
.rdr-timeline-badge.is-forecast {
	background: #d97706;
}
.rdr-timeline-badge.is-forecast::after { border-top-color: #d97706; }

.rdr-timeline-ticks {
	position: absolute;
	left:   0;
	right:  0;
	bottom: 0; /* fills the track's reserved padding-bottom strip exactly --
	              a fixed `top` offset here previously overlapped the slider
	              itself, since the slider's real rendered height didn't
	              match the guessed offset */
	height: 16px;
	pointer-events: none;
}

/* No transform here on purpose -- updateTimelineTicks() sets a per-tick
 * inline translateX(-X%) matching its own left:X%, which anchors a label
 * correctly at any position, not just the two ends the old
 * :first-child/:last-child pair covered. */
.rdr-tick {
	line-height: 1;
	position:    absolute;
	top:         0;
	font-size:   .6875rem;
	font-weight: 600;
	color:       var( --rdr-text-soft );
	white-space: nowrap;
}

/* Invisible track, Material 3 bar thumb. The native input is kept purely for
 * what it is genuinely good at -- keyboard support, focus handling, touch
 * behaviour -- with its own track made transparent so the styled rail above
 * shows through. Only the thumb is painted. */
.rdr-timeline-slider {
	position:   absolute;
	left: 0; right: 0;
	top:        40px;
	width:      100%;
	height:     16px;
	margin:     0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	outline:    none;
	cursor:     pointer;
}

.rdr-timeline-slider::-webkit-slider-runnable-track { height: 16px; background: transparent; }
.rdr-timeline-slider::-moz-range-track            { height: 16px; background: transparent; }

.rdr-timeline-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width:  4px; /* markX()'s THUMB_W must match this */
	height: 30px;
	margin-top: -7px; /* centre the 30px bar on the 16px track */
	border-radius: var( --rdr-radius-pill );
	background: var( --rdr-blue-dark );
	box-shadow: 0 0 0 3px var( --rdr-surface );
	cursor: pointer;
	transition: height var( --rdr-ease ), width var( --rdr-ease );
}

.rdr-timeline-slider::-moz-range-thumb {
	width:  4px;
	height: 30px;
	border: none;
	border-radius: var( --rdr-radius-pill );
	background: var( --rdr-blue-dark );
	box-shadow: 0 0 0 3px var( --rdr-surface );
	cursor: pointer;
}

/* M3: the handle slims and grows while held, so a fingertip doesn't hide it */
.rdr-timeline-slider:active::-webkit-slider-thumb { width: 2px; height: 38px; margin-top: -11px; }
.rdr-timeline-slider:active::-moz-range-thumb     { width: 2px; height: 38px; }

.rdr-timeline-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var( --rdr-surface ), 0 0 0 5px var( --rdr-blue ); }
.rdr-timeline-slider:focus-visible::-moz-range-thumb     { box-shadow: 0 0 0 3px var( --rdr-surface ), 0 0 0 5px var( --rdr-blue ); }

/* Zoom -- compact enough to float directly on the map, bottom-right
 * (mirrors the legend top-right / attribution bottom-left corner overlays). */
/* One segmented control rather than two loose circles -- the pair is a single
 * idea (change zoom) and every map product draws it joined. */
.rdr-zoom-group {
	position:    absolute;
	right:       10px;
	bottom:      10px;
	z-index:     3;
	display:     flex;
	flex-direction: column;
	gap:         0;
	border-radius: var( --rdr-radius-btn );
	overflow:    hidden;
	box-shadow:  var( --rdr-shadow-float );
}

.rdr-zoom-group .rdr-icon-btn {
	border-radius: 0;
	box-shadow:    none;
}

.rdr-zoom-group .rdr-icon-btn + .rdr-icon-btn {
	border-top: 1px solid rgba(0, 0, 0, .09);
}

.rdr-zoom-btn {
	font-size:   16px;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.rdr-legend       { display: none; }
	.rdr-search-box   { max-width: none; }

	/* No tick-thinning rule here any more (2026-09-01). It was added
	   proactively rather than from an observed overlap, and the two things
	   that justified it are both gone: ticks now self-anchor at any position
	   (so they can't overhang the ends), and the badge above the slider
	   carries the exact time, leaving these as coarse orientation only. Five
	   short HH:MM labels is the same count the other three widgets now show
	   at every width, so radar hiding three of them on a phone would be the
	   odd one out -- and would remove information to solve a problem short
	   labels don't actually have. */
}

/* -------------------------------------------------------------------------
 * Host-theme defence for form controls (2026-09-01)
 *
 * WordPress themes routinely reset buttons and inputs, and this site's does:
 *
 *     .themeform button,
 *     .themeform input[type="text"] { border-radius: 0; box-sizing: border-box; }
 *
 * `.themeform button` is one class plus one element (0,1,1); a bare
 * `.rdr-icon-btn` is one class (0,1,0), so the THEME WINS and every button
 * in this widget rendered square while the surrounding panels stayed rounded.
 * That is exactly the "buttons are still square" report, and it is invisible
 * from inside this stylesheet -- nothing here is wrong, it is simply outranked.
 *
 * Re-asserted below at two classes (0,2,0), which outranks any
 * single-class-plus-element theme rule. Scoped to this widget's own root so
 * nothing leaks outward into the host page.
 * ------------------------------------------------------------------------- */
.rdr-wrap .rdr-icon-btn,
.rdr-wrap .rdr-play-btn {
	border-radius: var( --rdr-radius-btn );
	box-sizing:    border-box;
}

.rdr-wrap .rdr-search-input {
	border-radius: var( --rdr-radius-pill );
	box-sizing:    border-box;
}

/* Segments inside the joined zoom control stay square on purpose -- three
 * classes (0,3,0) so this beats the rule above rather than fighting it. */
.rdr-wrap .rdr-zoom-group .rdr-icon-btn {
	border-radius: 0;
}