/* Shared watercolor controls. Load after the home/cabinet and button styles.
   The painted face has no baked cream rim: one CSS pixel provides the metal
   edge at every size. The existing live pointer glint remains above the face. */
html body:is(.watercolor-home,.watercolor-cabinet) {
 --wc-metal-edge:linear-gradient(137deg,#9b7142 0%,#d9bd7d 17%,#887248 37%,#d9bd7d 58%,#8d693f 79%,#c8a56a 100%);
 --wc-teal-face:url('/static/student/assets/watercolor/buttons-v8/teal-face.svg?v=9.0');
 --wc-purple-face:url('/static/student/assets/watercolor/buttons-v8/purple-face.svg?v=9.0');
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-painted>.wc-ref-surface,
html body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.wc-ref-nav.active>.wc-ref-surface {
 --wc-painted-face:var(--wc-teal-face);
 border:1px solid #b28a4e;border-top-color:#dec084;border-bottom-color:#886334;
 background-color:transparent;background-image:var(--wc-painted-face),var(--wc-metal-edge);
 background-origin:padding-box,border-box;background-clip:padding-box,border-box;
 background-size:100% 100%,100% 100%;background-position:center;background-repeat:no-repeat;
 box-shadow:inset 1px 1px 1px #d8ffff99,inset -1px -2px 3px #072c405c,
  inset 0 -1px 0 #89dcd9a1;
 filter:none;
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='continue']>.wc-ref-surface,
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.purple>.wc-ref-surface,
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-purple>.wc-ref-surface {
 --wc-painted-face:var(--wc-purple-face);background-color:transparent;
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-painted>.wc-ref-surface::before,
html body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.active>.wc-ref-surface::before {
 content:'';position:absolute;z-index:0;inset:auto;top:3px;left:7%;
 width:29%;max-width:105px;height:9%;min-height:2px;max-height:5px;
 border-radius:100%;pointer-events:none;transform:rotate(-3deg);
 background:linear-gradient(90deg,#f6ffff00,#efffffd9 24%,#dfffff73 67%,#edffff00);
 filter:blur(.35px);
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-painted>.wc-ref-surface::after,
html body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.active>.wc-ref-surface::after {
 content:'';position:absolute;z-index:0;inset:2px;pointer-events:none;border-radius:inherit;
 background:
  radial-gradient(ellipse 33% 29% at 11% 1%,#d9ffff52,transparent 76%),
  radial-gradient(ellipse 22% 7% at 83% 98%,#c0fff58c,transparent 80%),
  linear-gradient(90deg,#dcffff29,transparent 8%,transparent 93%,#032b3b29);
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:not(.wc-ref-painted):not(.wc-ref-nav)>.wc-ref-surface {
 border:1px solid #b2936280;background:
  radial-gradient(ellipse at 24% 5%,#ffffffba,transparent 51%),
  linear-gradient(170deg,#f9fff572,#c0d9d03b 53%,#f9f7dc5c);
 background-clip:padding-box;
 box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -1px 0 #799d9461;
 backdrop-filter:blur(3px) saturate(115%);-webkit-backdrop-filter:blur(3px) saturate(115%);
 filter:none;
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-icon>.wc-ref-surface {
 background:radial-gradient(ellipse at 31% 14%,#ffffffc4,transparent 28%),radial-gradient(ellipse at 46% 46%,#edf6e836 42%,#8ebfb761 87%,#e4f0dba3);
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-painted {
 box-shadow:0 0 0 .5px #795a378c!important;
 filter:drop-shadow(0 2px 2px #48564c29);
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-painted:hover {
 filter:drop-shadow(0 2px 3px #236c6e40);
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-glint {inset:1px;clip-path:none;border-radius:inherit}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-sweep {inset:1px;clip-path:none;border-radius:inherit}
/* The moving reflection stays under the live text and never replaces the
   permanent edge catchlight. Keep the existing pointer and reduced-motion
   behavior; only soften its white core. */
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-glint {
 background:radial-gradient(ellipse 61px 30px at var(--wc-pointer-x) var(--wc-pointer-y),#ecffff80,#c9ffff29 43%,transparent 78%);
}

/* Let the watercolor paper remain visible through the daylight navigation. */
html body:is(.watercolor-home,.watercolor-cabinet) .topbar .nav {
 position:relative;isolation:isolate;border:1px solid #a8b8a685;
 background:linear-gradient(173deg,#fffff65e,#c4d6cc1c 44%,#faf5de30);
 box-shadow:inset 0 1px 0 #ffffffdc,inset 0 -1px 0 #799d966b,0 2px 6px #53694d1a;
 backdrop-filter:blur(4px) saturate(110%);-webkit-backdrop-filter:blur(4px) saturate(110%);
}
html body:is(.watercolor-home,.watercolor-cabinet) .topbar .nav .wc-ref-nav:not(.active) {
 color:#163b43!important;text-shadow:0 1px 0 #fff5;
}
html body:is(.watercolor-home,.watercolor-cabinet) .topbar .nav .wc-ref-nav:not(.active)>.wc-ref-surface {
 background-image:none;background-color:transparent;border:0;box-shadow:none;
}
html body:is(.watercolor-home,.watercolor-cabinet) .topbar .nav .wc-ref-nav:not(.active):hover>.wc-ref-surface {
 background-color:#d4f6ee30;
}
html body:is(.watercolor-home,.watercolor-cabinet) .topbar .nav a+a::after {
 background:linear-gradient(transparent,#9a926748,transparent);
}
html body:is(.watercolor-home,.watercolor-cabinet) .topbar .theme-btn {
 --wc-pointer-x:50%;--wc-pointer-y:20%;
 border:1px solid #b2936280!important;background:
  radial-gradient(ellipse 34px 30px at var(--wc-pointer-x) var(--wc-pointer-y),#ffffffad,transparent 75%),
  linear-gradient(170deg,#f9fff55c,#bfd9d044 53%,#f9f7dc73)!important;
 box-shadow:inset 0 1px 0 #ffffffbc,inset 0 -1px 0 #799d9461,0 2px 3px #53694d18!important;
 backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}

/* Deep translucent glass, with a restrained warm metal line in the dark. */
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) {
 --wc-metal-edge:linear-gradient(137deg,#ba955d 0%,#dec387 19%,#76684a 39%,#d4b77a 61%,#937445 81%,#c8a364 100%);
}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-painted>.wc-ref-surface,
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.wc-ref-nav.active>.wc-ref-surface {
 filter:none;box-shadow:inset 1px 1px 1px #d4ffff80,inset -1px -2px 3px #001c326b,
  inset 0 -1px 0 #89dcd98c;
}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:not(.wc-ref-painted):not(.active):not(.wc-ref-nav)>.wc-ref-surface {
 border:1px solid #a79a6f9c;background:
  radial-gradient(ellipse at 24% 5%,#baeef366,transparent 49%),
  linear-gradient(167deg,#3568758c,#103b49ab 48%,#0b3444cc 73%,#285e6ba6);
 box-shadow:inset 0 1px 0 #c8ffff93,inset 0 -1px 0 #72b9ba57;
}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-icon>.wc-ref-surface {
 background:radial-gradient(ellipse at 30% 12%,#d2ffff70,transparent 29%),radial-gradient(ellipse at 48% 46%,#102d3899 45%,#2e5f6aa6 85%,#64a6b394);
 box-shadow:inset 0 1px 0 #d8ffffaa,inset 0 -1px 0 #86c1b585;
}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .topbar .nav {
 border:1px solid #8db1ad9c;background:
  radial-gradient(ellipse at 12% 0%,#b8ecea29,transparent 51%),
  linear-gradient(173deg,#5584924a,#082e3bac 47%,#0c3540a6 74%,#447d8429);
 box-shadow:inset 0 1px 0 #d4ffffb3,inset 0 -1px 0 #64a9b1a1,0 2px 6px #00192340;
 backdrop-filter:blur(4px) saturate(115%);-webkit-backdrop-filter:blur(4px) saturate(115%);
}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .topbar .nav .wc-ref-nav:not(.active) {
 color:#f0ecda!important;text-shadow:0 1px 1px #102b34;
}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .topbar .nav .wc-ref-nav:not(.active):hover>.wc-ref-surface {background-color:#87dbcf19}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .topbar .nav a+a::after {background:linear-gradient(transparent,#b7c9ad45,transparent)}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .topbar .theme-btn {
 border-color:#a79a6f9c!important;background:
  radial-gradient(ellipse 34px 30px at var(--wc-pointer-x) var(--wc-pointer-y),#c6f6f543,transparent 75%),
  linear-gradient(167deg,#3568758c,#103b49b3 48%,#0b3444cc 73%,#285e6bb3)!important;
 box-shadow:inset 0 1px 0 #c8ffff93,inset 0 -1px 0 #72b9ba57,0 2px 3px #0019233d!important;
}