/* Clean antique-metal frames. The legacy eight-slice markup is retained, but
   the raster crops are never painted: they included fragments of the source
   card's blue artwork and enlarged them into noisy borders. */
:is(.watercolor-home,.watercolor-cabinet) {
  --wc-frame-metal-edge: #947244;
  --wc-frame-metal-inner: #b89962;
  --wc-frame-metal-light: #fff0c9;
  --wc-frame-metal-shade: #705839;
}
html[data-theme="dark"] :is(.watercolor-home,.watercolor-cabinet) {
  --wc-frame-metal-edge: #b19967;
  --wc-frame-metal-inner: #806f4d;
  --wc-frame-metal-light: #e8d5a0;
  --wc-frame-metal-shade: #544832;
}
:is(.watercolor-home,.watercolor-cabinet) .wc-frame.wc-reference-frame {
  --wc-frame-corner: 25px;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  background: none !important;
  box-shadow: none !important;
}
:is(.watercolor-home,.watercolor-cabinet) .wc-reference-frame::before,
:is(.watercolor-home,.watercolor-cabinet) .wc-reference-frame::after {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  margin: 0;
  padding: 0;
  border-radius: 0 !important;
  background: none !important;
  pointer-events: none;
  opacity: 1 !important;
}
:is(.watercolor-home,.watercolor-cabinet) .wc-reference-frame::before {
  inset: 2px;
  border: 1px solid var(--wc-frame-metal-edge) !important;
  box-shadow: 0 1px 0 color-mix(in srgb,var(--wc-frame-metal-shade) 35%,transparent),
    inset 0 1px 0 color-mix(in srgb,var(--wc-frame-metal-light) 50%,transparent);
}
:is(.watercolor-home,.watercolor-cabinet) .wc-reference-frame::after {
  inset: 6px;
  border: 1px solid var(--wc-frame-metal-inner) !important;
  box-shadow: none !important;
}
:is(.watercolor-home,.watercolor-cabinet) .wc-reference-frame > .wc-frame-slice {
  position: absolute;
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  transform: none;
  overflow: hidden;
  line-height: 0;
  background: none;
}
/* No part of either screenshot remains in the border, in either theme. */
:is(.watercolor-home,.watercolor-cabinet) .wc-reference-frame .wc-frame-slice > svg {
  display: none !important;
}
:is(.watercolor-home,.watercolor-cabinet) .wc-frame-slice:is(.wc-frame-tl,.wc-frame-tr,.wc-frame-bl,.wc-frame-br) {
  display: block;
  width: var(--wc-frame-corner);
  height: var(--wc-frame-corner);
  z-index: 1;
  background: url('/static/student/assets/watercolor/frames-v9/metal-corner.svg') center/100% 100% no-repeat;
  transform-origin: center;
}
:is(.watercolor-home,.watercolor-cabinet) .wc-frame-tl { top: 0; left: 0; }
:is(.watercolor-home,.watercolor-cabinet) .wc-frame-tr { top: 0; right: 0; transform: scaleX(-1) !important; }
:is(.watercolor-home,.watercolor-cabinet) .wc-frame-bl { bottom: 0; left: 0; transform: scaleY(-1) !important; }
:is(.watercolor-home,.watercolor-cabinet) .wc-frame-br { bottom: 0; right: 0; transform: scale(-1) !important; }
html[data-theme="dark"] :is(.watercolor-home,.watercolor-cabinet) .wc-frame-slice:is(.wc-frame-tl,.wc-frame-tr,.wc-frame-bl,.wc-frame-br) {
  background-image: url('/static/student/assets/watercolor/frames-v9/metal-corner-night.svg');
}
/* A straight vector rim needs no paper strips beneath it. */
:is(.watercolor-home,.watercolor-cabinet) .glass:has(> .wc-reference-frame) {
  border-radius: 0 !important;
}
/* Small counters and surfaces without the ornamental wrapper use the same
   restrained metal colour, rather than an unrelated silver/blue outline. */
html body.watercolor-home .profile .stats .stat {
  border: 1px solid var(--wc-frame-metal-edge) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb,var(--wc-frame-metal-light) 45%,transparent) !important;
}
html body.watercolor-cabinet:not(.wc-cabinet-conference) :is(.glass,dialog):not(:has(> .wc-reference-frame)) {
  border-color: var(--wc-frame-metal-edge) !important;
  box-shadow: inset 0 0 0 3px color-mix(in srgb,var(--wc-frame-metal-inner) 12%,transparent),
    inset 0 0 0 4px color-mix(in srgb,var(--wc-frame-metal-inner) 45%,transparent),var(--shadow) !important;
}
html body.watercolor-cabinet:not(.wc-cabinet-conference) dialog:not(:has(> .wc-reference-frame)) {
  box-shadow: inset 0 0 0 3px color-mix(in srgb,var(--wc-frame-metal-inner) 12%,transparent),
    inset 0 0 0 4px color-mix(in srgb,var(--wc-frame-metal-inner) 45%,transparent),0 20px 65px #1d35274f !important;
}