/* The one reading-surface material used by every window opened over a place.
   Layout belongs to each feature; pigment, rim, blur and depth do not. */
.manyplace-panel-glass {
  border: 1px solid transparent;
  background:
    linear-gradient(158deg, var(--panel-tint-a), var(--panel-tint-b)) padding-box,
    var(--panel-rim) border-box;
  -webkit-backdrop-filter: var(--panel-filter);
  backdrop-filter: var(--panel-filter);
  box-shadow: var(--panel-shadow);
  text-shadow: var(--panel-text-shadow);
}

/* Compact selectors need a quieter edge than larger room panels. Keep the
   shared pigment, filter and platform fallbacks; soften only reflected light. */
.manyplace-panel-glass--quiet {
  --panel-rim: linear-gradient(
    158deg,
    rgba(255, 255, 255, 0.3),
    rgba(225, 234, 244, 0.1) 35%,
    rgba(255, 255, 255, 0.05) 60%,
    rgba(255, 245, 230, 0.16)
  );
  --panel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.025),
    0 2px 5px rgba(0, 0, 0, 0.12),
    0 14px 32px -12px rgba(0, 0, 0, 0.34);
}

/* Never stack another filtered pane inside the material. Local contrast is a
   tint over the already-filtered parent, so the room remains the backdrop. */
.manyplace-panel-glass__inset {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The lighter sibling used by controls that sit on the world instead of
   opening over it. It is intentionally less pigmented than panel glass. */
.manyplace-chrome-glass {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--chrome-glass-tint-top, rgba(255, 255, 255, 0.075)), var(--chrome-glass-tint-bottom, rgba(255, 255, 255, 0.028))) padding-box,
    linear-gradient(
      158deg,
      var(--chrome-glass-rim-top, rgba(255, 255, 255, 0.34)),
      var(--chrome-glass-rim-middle, rgba(255, 255, 255, 0.1)) 42%,
      var(--chrome-glass-rim-bottom, rgba(255, 255, 255, 0.2))
    ) border-box;
  -webkit-backdrop-filter: blur(var(--bar-blur)) saturate(140%) brightness(1.14);
  backdrop-filter: blur(var(--bar-blur)) saturate(140%) brightness(1.14);
  box-shadow:
    inset 0 1px 0 var(--chrome-glass-inner-light, rgba(255, 255, 255, 0.26)),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 10px 34px rgba(0, 0, 0, 0.34);
}

/* Compact chrome directly over photography needs a stable dark footing.
   This is the shared counterpart to the light frosted reading treatment:
   the same rim, blur and depth, with enough pigment to protect light ink. */
.manyplace-chrome-glass.manyplace-glass--grounded {
  --chrome-glass-tint-top: rgba(37, 35, 32, 0.42);
  --chrome-glass-tint-bottom: rgba(24, 23, 22, 0.54);
  color: rgba(255, 253, 248, 0.96);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* Chrome is normally a light tint of the world beneath it. When the browser
     cannot sample that world, every consumer needs the same warm opaque base;
     tying this to the material class keeps new islands and world labels safe. */
  .manyplace-chrome-glass {
    background:
      linear-gradient(150deg, rgba(46, 33, 26, 0.94), rgba(22, 19, 17, 0.965)) padding-box,
      linear-gradient(
        158deg,
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.1) 42%,
        rgba(255, 255, 255, 0.28)
      ) border-box;
  }
}

/* Frosted reading variant for small surfaces over bright rendered places.
   Reuses the existing single pane; no extra filtered child or refraction pass. */
.manyplace-glass--frosted {
  --panel-tint-a: rgba(230, 233, 226, .25);
  --panel-tint-b: rgba(204, 214, 205, .25);
  --chrome-glass-tint-top: var(--panel-tint-a);
  --chrome-glass-tint-bottom: var(--panel-tint-b);
  --panel-text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
  text-shadow: var(--panel-text-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .manyplace-glass--frosted {
    -webkit-backdrop-filter: blur(calc(var(--bar-blur) + 4px)) saturate(135%) brightness(1.08);
    backdrop-filter: blur(calc(var(--bar-blur) + 4px)) saturate(135%) brightness(1.08);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .manyplace-glass--frosted {
    --panel-tint-a: rgba(230, 233, 226, .96);
    --panel-tint-b: rgba(204, 214, 205, .97);
  }
}

/* Small reaction captions need stable contrast even over white sunlit floors.
   Dark caption ink sits on a frosted tint which still reveals the surrounding light. */
.manyplace-glass--caption {
  --chrome-glass-tint-top: rgba(235, 240, 231, .25);
  --chrome-glass-tint-bottom: rgba(209, 221, 210, .25);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .manyplace-chrome-glass.manyplace-glass--caption {
    background:
      linear-gradient(158deg, #f9f7f0, #e8e6de) padding-box,
      linear-gradient(158deg, rgba(255,255,255,.7), rgba(255,255,255,.3)) border-box;
  }
}