/* Light Jacket — San Francisco microclimates.
 *
 * Layout follows the pattern the good weather maps converge on: the map is
 * edge-to-edge and everything else floats over it in translucent cards. Nothing
 * boxes the map in, because the map is the content.
 *
 * Committed dark look — a saturated gradient overlay needs to be the brightest
 * thing on screen, and a light chrome would fight it.
 */

:root {
  color-scheme: dark;

  --surface-0: #111110;
  --surface-1: #1a1a19;
  --surface-2: #232321;
  --surface-3: #2c2c29;
  --border: #34342f;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #86857c;
  --accent: #3987e5;
  --warn: #eda100;
  --danger: #e66767;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 34px rgba(0, 0, 0, 0.6);
  --glass: rgba(23, 23, 22, 0.82);

  --font:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --gap: 14px;
  --rail-w: 216px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  /* Stop iOS Safari from bouncing the page behind the map. */
  overscroll-behavior: none;
  touch-action: manipulation;
}

#map {
  position: absolute;
  inset: 0;
  background: var(--surface-0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- leaflet chrome ---------- */

.leaflet-control-attribution {
  background: rgba(17, 17, 16, 0.8) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  padding: 1px 6px !important;
}
.leaflet-control-attribution a {
  color: var(--text-secondary) !important;
}
.leaflet-bar {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
  box-shadow: var(--shadow) !important;
}
.leaflet-bar a {
  background: var(--glass) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.leaflet-bar a:hover {
  background: var(--surface-3) !important;
}

/* ---------- shared card ---------- */

.panel {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- top bar ---------- */

.topbar {
  position: absolute;
  z-index: 500;
  top: calc(var(--safe-t) + var(--gap));
  left: calc(var(--safe-l) + var(--gap));
  right: calc(var(--safe-r) + var(--gap));
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}
.topbar > * {
  pointer-events: auto;
}

.brand {
  flex: 0 0 auto;
  /* Wide enough for the slogan to sit on ONE line. At 320px it broke after
     "need", which left "a light jacket in SF" hanging on line two and split the
     phrase the site is named after across the fold. A headline that wraps
     mid-thought reads as an accident. */
  max-width: 430px;
  padding: 9px 15px 11px;
}

/* The headline is the slogan, not a product name. "Light Jacket" on its own
   read as a clothing shop; the whole sentence explains the app, names the city,
   and is the reason the domain exists. */
.brand__row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.brand__mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-top: -1px;
}

h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.018em;
  /* Two even lines beat a long one and an orphan. */
  text-wrap: balance;
}

/* The two words the site is named after, sitting inside the sentence rather
   than above it as a wordmark. Warm amber from the ramp's own scale, so the
   brand colour is a colour the map already uses. */
h1 em {
  font-style: normal;
  font-weight: 650;
  color: #f9c880;
}

/* The verdict. Replaced a two-line provenance note; it is the only body copy
   on the page, so it can afford to be a real sentence. */
.verdict {
  margin: 3px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.verdict .warn {
  color: var(--warn);
}
/* The aside. Muted italic keeps it a wink rather than a second fact — and
   keeps it clear of the amber that means "this data is old". */
.quip {
  font-style: italic;
  color: var(--text-muted);
}

/* Layer pills. A scrolling row beats a fixed grid: it holds any number of
   layers and collapses to one thumb-swipeable strip on a phone. */
.pillbar {
  flex: 0 1 auto;
  display: flex;
  gap: 4px;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pillbar::-webkit-scrollbar {
  display: none;
}

.layer-btn {
  appearance: none;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 9px 13px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s;
}
.layer-btn:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}
.layer-btn[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}
.layer-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- right rail ---------- */

.rail {
  position: absolute;
  z-index: 500;
  right: calc(var(--safe-r) + var(--gap));
  top: calc(var(--safe-t) + var(--gap) + 62px);
  width: var(--rail-w);
  /* Capped well short of the viewport. Left to grow, 37 rows of numbers run
     the full height of a tall window and turn the rail into a wall that
     competes with the map for attention -- and the map is the content. It
     still scrolls, so nothing is lost. */
  max-height: min(58dvh, calc(100dvh - var(--safe-t) - var(--safe-b) - 262px));
  display: flex;
  flex-direction: column;
}

#dock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 0 1 auto;
}

.block {
  padding: 11px 12px;
  flex: 0 0 auto;
}
.block--list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 0 1 auto;
  padding-right: 4px;
}

/* ---------- legend ---------- */

.legend__bar {
  position: relative;
  height: 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
}

/* Notch marking the diverging pivot — SF's median temperature. Only shown on
   the absolute scale, where the midpoint is a fact about the city rather than
   an artifact of whatever hours happen to be loaded. */
.legend__pivot {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text-primary);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
  display: none;
}

/* Ticks are positioned by value, not spaced evenly: the absolute scale wants a
   label at the pivot, which is nowhere near the middle of the bar. */
.legend__ticks {
  position: relative;
  height: 12px;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
}
.legend__ticks span {
  position: absolute;
  top: 0;
  white-space: nowrap;
  transform: translateX(-50%);
}
.legend__ticks span:first-child {
  transform: none;
}
.legend__ticks span:last-child {
  transform: translateX(-100%);
}
.legend__ticks .is-pivot {
  color: var(--text-primary);
}
.legend__unit {
  margin-top: 3px;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}
/* ---------- neighborhood list ---------- */

.list__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  padding-right: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.list {
  list-style: none;
  margin: 0;
  padding: 0 8px 0 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  overscroll-behavior: contain;
}

.list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 5px;
  border-radius: 6px;
  font-size: 11.5px;
  cursor: pointer;
}
.list li:hover {
  background: var(--surface-2);
}

.list .swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.list .hood {
  flex: 1 1 auto;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list .val {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ---------- bottom sheet / time controls ---------- */

.sheet {
  position: absolute;
  z-index: 550;
  bottom: calc(var(--safe-b) + var(--gap));
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 2 * var(--gap)));
  padding: 8px 16px 12px;
}

.sheet__handle {
  display: none;
}

.time__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.icon-btn {
  appearance: none;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.icon-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.icon-btn:hover {
  background: var(--surface-3);
}

.time__readout {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.time__stamp {
  font-size: 14px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.time__rel {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.time__rel.is-error {
  color: var(--danger);
}

.date-wrap {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
}
.date-wrap #date-picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  color-scheme: dark;
  font: inherit;
}
.date-wrap #date-picker:focus-visible + .chip-btn,
.date-wrap #date-picker:focus-visible ~ .chip-btn {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sheet.is-history #date-label {
  border-color: var(--accent);
  color: var(--text-primary);
}

.chip-icon {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: -2px;
}

.chip-btn {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.chip-btn:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

/* The scrubber: a canvas showing the citywide spread over time, with an
   invisible range input on top. The input gives us drag, touch and keyboard
   handling for free, and stays the accessible control of record. */
.scrub {
  position: relative;
  height: 52px;
  margin-top: 2px;
}
.scrub__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
}
#time-slider {
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
  opacity: 0;
}
#time-slider::-webkit-slider-thumb {
  appearance: none;
  width: 34px;
  height: 52px;
}
#time-slider::-moz-range-thumb {
  width: 34px;
  height: 52px;
  border: 0;
}
#time-slider:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.time__axis {
  position: relative;
  height: 14px;
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-muted);
}
.time__axis span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.time__axis span.is-now {
  color: var(--accent);
  font-weight: 600;
}

.sheet__extra {
  display: none;
}

/* ---------- hover readout ---------- */

.readout {
  position: absolute;
  z-index: 600;
  pointer-events: none;
  background: rgba(17, 17, 16, 0.95);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.55;
  box-shadow: var(--shadow);
  min-width: 136px;
}
.readout .r-title {
  font-weight: 600;
  margin-bottom: 3px;
}
.readout .r-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--text-secondary);
}
.readout--pinned {
  /* Unlike the hover card this one is interactive -- it has a dismiss button
     and has to survive the finger that opened it. */
  pointer-events: auto;
  padding-right: 26px;
  border-color: rgba(255, 255, 255, 0.18);
}
.readout__close {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
}
.readout__close:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}
.readout__close svg {
  width: 12px;
  height: 12px;
}
.readout .r-row b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ---------- map labels ---------- */

/* ---------- value chips on the map ---------- */

/* The neighborhood label and its reading are one object. The name is the
   caption; the number is the point. */

.chip-label-wrap {
  /* Leaflet anchors the icon's top-left at the point; centre it on the point
     instead, so the chip reads as belonging to that spot. */
  pointer-events: none;
}
.chip-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* No pill. A dark plate behind every label turned the map into a field of
     boxes once there were eighteen of them, and it fought the colour surface
     underneath -- which is the thing being read. Bare text with a tight shadow
     stays legible over both ends of the ramp AND takes far less room, which is
     what lets this many labels coexist. */
  text-align: center;
  max-width: 84px;
  color: #fff;
  /* A HALO, not a drop shadow. The label has to sit on anything from a 0.60
     lightness deep blue to a 0.92 near-white pivot, and a soft blurred shadow
     vanishes against the light end -- which is most of the map most of the
     time. A hard dark outline drawn *behind* the glyphs is what every serious
     map uses, and it works on both ends of the ramp.

     paint-order keeps the stroke under the fill so the letterforms don't get
     thinned by their own outline. The repeated text-shadows are the fallback
     for anything that ignores paint-order: stacking the same shadow compounds
     its alpha into a tight ring. */
  paint-order: stroke fill;
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.62);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.85);
  /* Chips must never swallow the tap that drops a pin. */
  pointer-events: none;
}
.chip-label.is-culled,
.chip-label.is-empty {
  display: none;
}
.chip-label__value {
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.chip-label__name {
  margin-top: 1px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
  /* Wrapping keeps "Outer Richmond" from being twice as wide as it is tall,
     which matters a lot for how many labels survive the collision pass. */
  color: rgba(255, 255, 255, 0.92);
}

/* The tapped point. */
.pin-dot {
  pointer-events: none;
}
.pin-dot::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 6px rgba(0, 0, 0, 0.7);
}

/* ---------- phone colour key ---------- */

/* Desktop has the real legend in the rail; this only exists because the dock is
   collapsed by default on a phone. */
.minileg {
  display: none;
}

/* ---------- loading ---------- */

.loading {
  position: absolute;
  inset: 0;
  z-index: 900;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: var(--surface-0);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.loading[hidden] {
  display: none;
}
.loading.is-error {
  color: var(--danger);
}
.loading.is-error .spinner {
  display: none;
}

.spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ======================================================================
   Narrow screens: the rail becomes a drag-up sheet, following the
   Apple/Google Maps pattern. Collapsed shows the time controls; expanded
   adds the legend and neighborhood list.
   ====================================================================== */

@media (max-width: 899px) {
  :root {
    --gap: 10px;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .brand {
    max-width: none;
    padding: 8px 12px 9px;
  }
  .brand h1 {
    font-size: 15.5px;
  }
  .brand__mark {
    width: 26px;
    height: 26px;
  }
  .verdict {
    font-size: 11px;
  }

  /* Bleed the pill row to both edges so it reads as swipeable, and fade the
     trailing edge so it's obvious there's more than fits. Bleeding alone left
     the last pill sliced cleanly by the viewport, which reads as a layout bug
     rather than as an invitation to scroll. */
  .pillbar {
    margin: 0 calc(-1 * var(--gap));
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 5px var(--gap);
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .layer-btn {
    scroll-snap-align: start;
  }

  .rail {
    display: none;
  }

  .sheet {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    transform: none;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 0;
    /* The extra bottom room is the attribution's gutter: it's pinned to the
       map's bottom-right, which is behind the sheet on a phone. */
    padding: 0 var(--gap) calc(var(--safe-b) + 24px);
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
    transition: max-height 0.25s ease;
  }

  .sheet__handle {
    display: block;
    width: 100%;
    padding: 9px 0 7px;
    background: none;
    border: 0;
    cursor: grab;
    touch-action: none;
  }
  .sheet__grip {
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto;
    border-radius: 2px;
    background: var(--surface-3);
  }

  /* Touch targets at the 44px minimum, not merely "bigger than desktop". */
  .icon-btn {
    width: 44px;
    height: 44px;
  }
  .chip-btn,
  #date-picker {
    padding: 12px 14px;
    font-size: 12.5px;
    min-height: 44px;
  }
  .layer-btn {
    padding: 12px 15px;
    font-size: 12.5px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .scrub {
    height: 58px;
  }
  /* The close button is the one way out of a pinned reading; it can't be a
     22px target under a fingertip. */
  .readout__close {
    width: 34px;
    height: 34px;
  }
  .readout--pinned {
    padding: 10px 38px 10px 12px;
    font-size: 12px;
  }

  /* Always-visible colour key, since the dock holding the real legend is
     collapsed by default here. */
  .minileg {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 8px;
  }
  .minileg__bar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
  }
  .minileg__end {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
  }

  /* Chips carry the reading now, so they need to survive a smaller screen
     without turning the map into a wall of numbers. */
  .chip-label {
    max-width: 74px;
    -webkit-text-stroke-width: 2.5px;
  }
  .chip-label__value {
    font-size: 16px;
  }
  .chip-label__name {
    font-size: 9.5px;
  }

  .sheet__extra {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: 10px;
    /* Collapsed by default; the handle toggles .is-open. */
    max-height: 0;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
  .sheet.is-open .sheet__extra {
    max-height: 44dvh;
    opacity: 1;
  }

  /* Inside the sheet these are already on a card, so drop the nesting. */
  .sheet__extra #dock {
    gap: 12px;
  }
  .sheet__extra .panel {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    padding: 12px 0 0;
  }
  .sheet__extra .list {
    max-height: 30dvh;
  }
  .sheet__extra .list li {
    padding: 8px 5px;
    font-size: 13px;
  }
  .sheet__extra .list .val {
    font-size: 12.5px;
  }

  /* The HOVER card stays hidden -- a touchscreen has no hover, and a stray
     synthesized mousemove would flash it. The PINNED card is the replacement
     for it here, so it must not be caught by the same rule. */
  .readout:not(.readout--pinned) {
    display: none;
  }

  /* Pinch-zoom is the native gesture on touch; the buttons only ever collide
     with the sheet. */
  .leaflet-control-zoom {
    display: none;
  }
  .leaflet-control-attribution {
    /* Above the sheet, in the gutter reserved for it. */
    z-index: 1000;
    background: none !important;
    font-size: 8.5px !important;
    max-width: 62vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Very short viewports (landscape phones): drop the map to a strip and keep
   the controls usable rather than letting the sheet eat the screen. */
@media (max-height: 460px) and (max-width: 899px) {
  .brand .verdict {
    display: none;
  }
  .scrub {
    height: 40px;
  }
  .sheet.is-open .sheet__extra {
    max-height: 40dvh;
  }
}