/* Design tokens, colors lifted from gbd-websuite.de's compiled CSS
   (primary/dark blue + olive-green accent pairing, warm neutral grays).
   The landing page at / uses the same set -- keep them in step. */
:root {
  --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --color-bg: #ffffff;
  --color-panel-bg: #fbfbfa;
  --color-panel-border: #e2e2df;
  --color-text: #262626;
  --color-text-muted: #63625d;
  --color-text-faint: #8c8b86;

  --color-primary: #0086c9;
  --color-primary-dark: #006fb8;
  --color-primary-darker: #00588f;
  --color-primary-tint: #eef5fa;

  --color-accent: #84ac2b;
  --color-accent-dark: #5c7a1e;
  --color-accent-tint: #f2f7e6;

  --color-danger: #c0392b;
  --color-danger-tint: #fbeceb;

  --code-bg: #1e1e1e;
  --code-fg: #d4d4d4;
  --code-border: #33332f;

  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-panel: -12px 0 32px rgba(38, 38, 38, 0.05);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
}

.hidden { display: none !important; }

#layout { display: flex; height: 100vh; }

#map { flex: 1 1 auto; background: #eef0ee; }

/* ---- map controls ---- */

/* Sits directly under Leaflet's own +/- zoom buttons (same 'topleft'
   control corner, added right after them) -- the value box is sized to
   match those buttons, with a small captioned label beneath it. */
.zoom-level-control {
  text-align: center;
  user-select: none;
}

/* Matches a Leaflet zoom button's actual face: 26x26 with a box-shadow
   for edge definition, not a border -- Leaflet gets its buttons' outline
   from a box-shadow on the surrounding bar, which (unlike a border)
   doesn't eat into the 26x26 face. A border here would leave this box's
   readable area smaller than the buttons directly above it. */
.zoom-level-value {
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  /* The slider-wrap below is now wider than this box, to make room for the
     tick labels beside it (see .zoom-level-slider-wrap) -- margin auto
     re-centers this narrower, block-level box under it. */
  margin: 0 auto;
  background: var(--color-bg);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

/* An opaque backing plate, not just colored text: the map under this
   control is a different color per theme (dark, satellite, high-contrast,
   ...), so text placed directly on it would lose contrast on some of
   them. A solid background keeps it legible against all of them. */
.zoom-level-caption {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  background: var(--color-bg);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: var(--color-text);
}

/* Same opaque-backing-plate reasoning as .zoom-level-value/-caption above:
   legible against whatever the current theme's tiles look like underneath.
   Sized to the *rotated* (visual) footprint -- wide enough for the slider's
   16px-wide bar plus the tick scale and its zoom-number labels beside it,
   tall enough for a comfortable drag range. Positioning context for the
   slider and its tick scale below, which are placed with explicit
   coordinates rather than flex/grid: a CSS transform (the slider's rotate)
   doesn't shrink the element's *layout* box, so a flex row here would lay
   the tick scale out to the right of the slider's full pre-rotation width
   (220px) instead of its rotated (16px) one, landing it far outside this
   wrap -- confirmed live. */
.zoom-level-slider-wrap {
  width: 48px;
  height: 236px;
  margin-top: 6px;
  background: var(--color-bg);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border-radius: var(--radius-sm);
  position: relative;
}

/* A horizontal range input rotated into the wrap's vertical footprint --
   see the ZoomLevelControl comment in mapview.js for why not
   orient="vertical"/-webkit-appearance. width/height are the *pre-rotation*
   box (track length/thickness) -- 220px, long enough that the travel no
   longer reads as cramped once there are ~20 zoom levels to spread across
   it. `left: 10px` + `translate(-50%, -50%)` centers that box (before
   rotating) on the point (10px, 50%) of the wrap, independent of the box's
   own 220x16 size -- transforms apply after layout, so without the
   translate the box would rotate around its normal top-left position
   instead of that chosen center. The rotated result is a 16px-wide
   vertical bar spanning x=2..18px (its 8px track centered in that, the
   16px thumb filling it), leaving room for .zoom-level-scale beside it at
   x>=20px. */
.zoom-level-slider {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 220px;
  height: 16px;
  margin: 0;
  /* Set by mapview.js on every zoom change: how far along the track the
     thumb's *center* sits, as a % of the full track length in the
     slider's own pre-rotation left-to-right direction (which the -90deg
     below maps to bottom-to-top on screen). The track rules split their
     blue/gray gradient exactly there, so the fill always ends under the
     thumb -- the same number the tick marks are placed with, so fill,
     thumb and ticks cannot drift apart. */
  --zoom-fill: 0%;
  transform: translate(-50%, -50%) rotate(-90deg);
  /* Track and thumb are both drawn from scratch below rather than left to
     `accent-color`. Native range widgets differ enough between engines
     that the same CSS produced two different controls: Chrome ignores a
     ::-webkit-slider-thumb rule entirely unless this appearance reset is
     present (so it kept its full native look), while Firefox applied the
     matching ::-moz-range-thumb rule and, because styling the thumb drops
     the engine's own progress fill, rendered a thin unfilled track with no
     blue at all. Drawing both parts explicitly is what makes the control
     look the same everywhere. */
  -webkit-appearance: none;
  appearance: none;
  background: none;
  cursor: pointer;
}

/* The track: an 8px capsule, blue up to the thumb and light gray past it,
   with a hairline outline for definition. Geometry and colors are measured
   from the same control as rendered natively on staging (8px thickness,
   #efefef unfilled, a ~#b2b2b2 outline that the engine darkens over the
   filled part), so this reads as that same control rather than a new look.
   The outline is an inset shadow rather than a border precisely because it
   has to do that darkening trick: over gray it lands near #b2b2b2, over
   blue near the darker blue the engine uses, from one declaration.
   Both vendor rules are needed -- an engine only honours its own. */
.zoom-level-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  background: linear-gradient(
    to right,
    var(--color-primary) var(--zoom-fill),
    #efefef var(--zoom-fill)
  );
}

.zoom-level-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  background: linear-gradient(
    to right,
    var(--color-primary) var(--zoom-fill),
    #efefef var(--zoom-fill)
  );
}

/* Firefox paints its own filled portion on top of the track. The gradient
   above already draws that, so this would double it up -- and would go on
   using the engine's fill rule rather than the thumb-center split, which
   is the one the ticks agree with. */
.zoom-level-slider::-moz-range-progress {
  background: transparent;
}

/* Thumb: a plain blue disc, no border or shadow, matching staging's. Its
   size is pinned (rather than left to the engine, which picks its own)
   because the tick placement in mapview.js has to know how far the thumb
   is inset from the track's ends -- this must stay in step with
   SLIDER_THUMB_SIZE there. */
.zoom-level-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  /* WebKit lays the thumb out against the track's top edge, not the
     input's box, so centering it on an 8px track is this half-difference.
     Firefox centers ::-moz-range-thumb itself and needs no counterpart. */
  margin-top: -4px;
  cursor: pointer;
}

.zoom-level-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
}

/* Tick scale beside the slider (see the ZoomLevelControl comment in
   mapview.js for why plain divs rather than a native
   list="..."/<datalist>). Height matches .zoom-level-slider's *width*
   (its length once rotated), so ticks (and their labels) positioned as a %
   of this element's height land exactly on the slider's own travel -- 0 at
   the bottom, max at the top, same orientation as the slider. Width is just
   the tick marks' own lane; the labels are positioned in the same
   coordinate system but extend past it into the rest of the wrap. */
.zoom-level-scale {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 8px;
  height: 220px;
  transform: translateY(-50%);
}

.zoom-level-tick {
  position: absolute;
  left: 0;
  width: 4px;
  height: 1px;
  background: var(--color-text-faint);
  transform: translateY(-50%);
}

.zoom-level-tick.major {
  width: 8px;
  height: 1.5px;
  background: var(--color-text);
}

/* The zoom number beside each major tick (every 5 levels, plus 0/max) --
   its own small opaque plate for the same legibility reason as the other
   readouts, since it also sits directly on the map. Positioned in
   .zoom-level-scale's own coordinate space (left: 11px clears the 8px-wide
   tick lane starting at that element's left: 20px, landing at wrap x=31). */
.zoom-level-tick-label {
  position: absolute;
  left: 11px;
  transform: translateY(-50%);
  background: var(--color-bg);
  border-radius: 2px;
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  white-space: nowrap;
}

/* Matches the size of a leaflet-draw toolbar button so the two stacks read
   as one column of controls rather than two. */
.clear-draw-control a {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-danger);
  background: #fff;
  display: block;
}

.clear-draw-control a:hover { background: var(--color-danger-tint); }

/* Leaflet's built-in scale control (bottom-left): the ground distance a
   given screen length represents, re-labeled automatically per zoom level.
   Kept as the classic caliper/bracket shape ("|____|": a vertical tick at
   each end plus a line along the bottom, no top) rather than a plain box --
   border-left/-right/-bottom draw that, with border-top implicitly absent.
   Backing plate is still opaque (not Leaflet's default translucent white),
   for the same legibility-across-themes reason as .zoom-level-value above. */
.leaflet-control-scale-line {
  border: none;
  border-left: 2px solid var(--color-text);
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--color-bg);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px 2px;
}

/* ---- sidebar shell ---- */

#sidebar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--color-panel-bg);
  position: relative;
  width: 380px;
  border-left: 1px solid var(--color-panel-border);
  box-shadow: var(--shadow-panel);
}

/* Brand signature: a thin two-color bar echoing the blue/green pairing
   the palette is built from, rather than repeating it as a loud gradient
   throughout the UI. */
#sidebar::before {
  content: "";
  display: block;
  height: 3px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--color-primary) 0 60%, var(--color-accent) 60% 100%);
}

.panel-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
}

.brand { display: flex; align-items: center; gap: 9px; }

.brand-mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 35% 35%, var(--color-primary) 0 55%, transparent 56%),
    radial-gradient(circle at 65% 65%, var(--color-accent) 0 55%, transparent 56%);
}

.brand-name {
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.01em;
}

.brand-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 1px;
}

.badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-darker);
  background: var(--color-primary-tint);
  border: 1px solid #d3e8f3;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* ---- tab bar ---- */

/* Same segmented-control idiom as the XYZ/WMTS switch below it -- the two
   tabs are mutually exclusive in exactly the same way, and a second
   interaction pattern for the same kind of choice would be noise. */
.tabbar {
  flex: 0 0 auto;
  padding: 0 18px 14px;
  border-bottom: 1px solid var(--color-panel-border);
}

.tabbar .segmented { display: flex; width: 100%; }
.tabbar .segmented label { flex: 1; text-align: center; }

/* ---- panels ---- */

/* Scrolls rather than clips: nothing sits below the controls in this
   column, so taking the leftover height changes no layout, but it means a
   short window scrolls the last control into reach instead of hiding it. */
.panel-controls {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field { display: flex; flex-direction: column; gap: 4px; }

.field-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.field-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.field-check input {
  accent-color: var(--color-primary-dark);
  margin: 0;
}

label.field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

select, input[type="text"], textarea {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
}

select:disabled {
  color: var(--color-text-faint);
  background: #f4f4f2;
  cursor: not-allowed;
}

select:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.schema-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-primary-darker);
  background: var(--color-primary-tint);
  border: 1px solid #d3e8f3;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}

.hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-text-faint);
}

/* Segmented toggle -- mutually exclusive choices, so a pill switch encodes
   that better than loose radio buttons. */
.segmented {
  display: inline-flex;
  border: 1px solid var(--color-panel-border);
  border-radius: 999px;
  background: #fff;
  padding: 2px;
  width: fit-content;
}

.segmented label {
  position: relative;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}

.segmented input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.segmented label:has(input:checked) {
  background: var(--color-primary-dark);
  color: #fff;
}

.segmented label:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

#urlTemplate {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-muted);
  background: #f4f4f2;
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  word-break: break-all;
}

button.primary {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--color-primary-dark);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px;
  cursor: pointer;
  transition: background-color 120ms ease;
}

button.primary:hover:not(:disabled) { background: var(--color-primary-darker); }

button.primary:disabled {
  background: #cfd3d6;
  color: #8c8b86;
  cursor: default;
}

/* Suchen + Leeren sit side by side: the primary action takes the room it
   needs, the secondary Leeren only as much as its label. */
.button-row { display: flex; gap: 8px; }
.button-row .primary { flex: 1; }

/* Secondary action (Leeren): same shape as .primary, but an outlined,
   low-emphasis face so it reads as the lesser of the two buttons. */
button.secondary {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-primary-dark);
  background: #fff;
  border: 1px solid var(--color-primary-dark);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

button.secondary:hover:not(:disabled) {
  background: var(--color-primary-dark);
  color: #fff;
}

button.secondary:disabled {
  border-color: #cfd3d6;
  color: #8c8b86;
  cursor: default;
}

/* ---- debug grid overlay ---- */

/* The container is what a drag or a scroll actually hits, so it -- not the
   individual cells -- is where interaction has to be turned off, or the
   overlay would swallow every map gesture. */
.debug-grid { pointer-events: none; }

/* The global `box-sizing: border-box` above is load-bearing here: Leaflet
   sets each tile div's width/height to the tile size, so the border has to
   be drawn inside those 256px. With content-box every cell would sit 1px
   off the tile it is supposed to be tracing. */
.debug-grid-tile {
  border: 1px solid rgba(224, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* An opaque (not translucent) backing plate, for the same reason
   .zoom-level-caption has one: the tiles underneath are a different color
   per theme, and any transparency here lets a busy tile show through and
   eat into the label's legibility. */
.debug-grid-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #c0130a;
  background: #ffffff;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

/* ---- CartoCSS editor (demo theme only) ---- */

.editor-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-md);
  background: #fff;
}

#editorCss {
  width: 100%;
  /* Fixed rather than flexible: this now shares a scrolling column with
     every other control instead of owning its own full-height panel, so it
     takes a readable slice and lets the column scroll past it. */
  height: 40vh;
  min-height: 160px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--code-fg);
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-md);
  padding: 12px;
  resize: vertical;
  tab-size: 2;
}

#editorCss:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 134, 201, 0.25);
}

/* ---- status messages ---- */

#status, #editorStatus, #searchError {
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: 30vh;
  overflow: auto;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  padding: 8px 10px;
  display: none;
}

#status:empty, #editorStatus:empty { display: none; }
#status.ok, #status.err, #editorStatus.ok, #editorStatus.err { display: block; }

#status.ok, #editorStatus.ok {
  color: var(--color-accent-dark);
  background: var(--color-accent-tint);
  border-left-color: var(--color-accent);
}

#status.err, #editorStatus.err, #searchError {
  color: var(--color-danger);
  background: var(--color-danger-tint);
  border-left-color: var(--color-danger);
}

#searchError { display: block; }
#searchError.hidden { display: none !important; }

/* ---- watch-mode footer ---- */

/* Watch-mode indicator: the server recompiles a theme when its sources
   change, and this is how you tell at a glance that it is actually
   watching -- green while it is, red when the last recompile failed,
   gray when watch mode is off. */
.watch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--color-text-faint);
}

.watch-dot.on { background: var(--color-accent); }
.watch-dot.err { background: var(--color-danger); }

.panel-footer {
  flex: 0 0 auto;
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--color-panel-border);
}

/* ---- search results ---- */

.search-summary {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  padding-bottom: 2px;
}

.geom-note {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--color-accent-dark);
  background: var(--color-accent-tint);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
}

.result-card {
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.result-card:hover { border-color: var(--color-primary); }

.result-card.selected {
  border-color: var(--color-accent);
  background: var(--color-accent-tint);
}

.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.45;
}

.result-table td {
  padding: 2px 0;
  vertical-align: top;
}

/* The key column stays narrow and the value wraps, so a long OSM tag value
   doesn't push the property name off the card. */
.result-table .result-key {
  width: 38%;
  padding-right: 8px;
  color: var(--color-text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  word-break: break-word;
}

.result-table .result-value {
  color: var(--color-text);
  word-break: break-word;
}

/* The first two rows are the identity of the hit (name, category) -- worth
   more weight than the address columns under them. */
.result-table tr:first-child .result-value {
  font-weight: 700;
  font-size: 13px;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pager button {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-primary-darker);
  background: #fff;
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
}

.pager button:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
}

.pager button:disabled {
  color: var(--color-text-faint);
  cursor: default;
  background: #f4f4f2;
}

.pager-label {
  font-size: 11.5px;
  color: var(--color-text-faint);
  white-space: nowrap;
}

@media (max-width: 760px) {
  #layout { flex-direction: column; }
  #map, #sidebar { width: 100%; min-height: 0; }
  #map { flex: 1 1 50%; }
  #sidebar {
    flex: 1 1 50%;
    border-left: none;
    border-top: 1px solid var(--color-panel-border);
    box-shadow: 0 -12px 32px rgba(38, 38, 38, 0.05);
  }
}