@canopy-iiif/app 1.9.1 → 1.9.2

package/ui/styles/index.css

@@ -1,6 +1,27 @@
 /**
  * Main stylesheet for the @canopy-iiif/app/ui package
  */
+:root {
+  --canopy-radius-none: 0;
+  --canopy-radius-sm: 0;
+  --canopy-radius-md: 0;
+  --canopy-radius-lg: 0;
+  --canopy-radius-xl: 0;
+  --canopy-radius-pill: 0;
+  --canopy-radius-circle: 0;
+  --canopy-shadow-none: none;
+  --canopy-shadow-sm: none;
+  --canopy-shadow-md: none;
+  --canopy-shadow-lg: none;
+}
+
+*,
+*::before,
+*::after {
+  border-radius: var(--canopy-radius-none) !important;
+  box-shadow: var(--canopy-shadow-none) !important;
+}
+
 @layer base {
   body {
     margin: 0;
@@ -41,7 +62,7 @@
 }
 @layer base {
   h1 {
-    font-size: 2.61rem;
+    font-size: 2rem;
     line-height: 1.25;
     margin: 0 0 1rem 0;
   }
@@ -117,9 +138,6 @@ blockquote {
   border-left: none;
   border-right: none;
 }
-.markdown-table tbody {
-  box-shadow: 5px 5px 11px rgba(0, 0, 0, 0.05);
-}
 .markdown-table tbody tr:nth-child(even) {
   background-color: var(--color-gray-200);
 }
@@ -157,31 +175,36 @@ section[data-footnotes] ul li,
     align-items: center;
     justify-content: center;
     gap: 0.35rem;
-    padding: 0.55rem 1.4rem;
-    border-radius: 9999px;
-    font-size: 0.9222rem;
-    font-weight: 300;
+    padding: 0.6rem 1.4rem;
+    border: 1px solid currentColor;
+    color: inherit;
+    font: inherit;
     text-decoration: none;
-    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+    cursor: pointer;
+    line-height: 1.4;
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+    border-color: currentColor;
   }
   .canopy-button--primary {
     background-color: var(--color-accent-default);
+    border-color: var(--color-accent-default);
     color: var(--color-accent-50);
-    box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
   }
   .canopy-button--primary:hover, .canopy-button--primary:focus-visible {
     background-color: var(--color-accent-600);
+    border-color: var(--color-accent-600);
   }
   .canopy-button--secondary {
-    border: 1px solid var(--color-gray-200);
-    color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
-    background-color: var(--color-gray-50);
+    border-color: var(--color-gray-400);
+    color: var(--color-gray-900);
   }
   .canopy-button--secondary:hover, .canopy-button--secondary:focus-visible {
-    border-color: color-mix(in srgb, var(--color-accent-400) 65%, transparent);
-    background-color: color-mix(in srgb, var(--color-accent-300) 25%, transparent);
+    border-color: var(--color-accent-400);
     color: var(--color-accent-900);
   }
+  .canopy-button--ghost {
+    border-color: transparent;
+  }
   .canopy-button-group {
     display: flex;
     flex-direction: column;
@@ -189,8 +212,6 @@ section[data-footnotes] ul li,
     gap: 0.5rem;
   }
   .canopy-button-group__text {
-    font-size: 1.38rem;
-    font-weight: 500;
     color: var(--color-gray-900);
     margin-bottom: 1rem;
     letter-spacing: -0.0125em;
@@ -199,7 +220,7 @@ section[data-footnotes] ul li,
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0.75rem;
+    gap: 1rem;
     padding: 0.618rem 0 1.618rem;
     width: 100%;
   }
@@ -209,8 +230,6 @@ section[data-footnotes] ul li,
     text-align: center;
     padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 4rem);
     margin: 2rem 0;
-    border-radius: 1.25rem;
-    background: linear-gradient(173deg, transparent 0%, var(--color-accent-200) 100%);
   }
   .canopy-button-group--interstitial .canopy-button-group__actions {
     justify-content: center;
@@ -224,10 +243,8 @@ section[data-footnotes] ul li,
   text-decoration: none;
   color: inherit;
   border: 1px solid var(--color-gray-200);
-  border-radius: 0.5rem;
   overflow: hidden;
   transition: all 150ms cubic-bezier(0.22, 1, 0.36, 1);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
 }
 .canopy-card figure {
   margin: 0;
@@ -236,7 +253,6 @@ section[data-footnotes] ul li,
   position: relative;
   width: 100%;
   padding-bottom: var(--canopy-card-padding);
-  background-color: var(--color-gray-100);
   overflow: hidden;
 }
 .canopy-card .canopy-card-media > img {
@@ -251,7 +267,6 @@ section[data-footnotes] ul li,
   flex-direction: column;
   opacity: 0;
   transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
-  background: var(--color-gray-100);
   color: var(--color-gray-muted);
   font-size: 83.333%;
 }
@@ -279,7 +294,6 @@ section[data-footnotes] ul li,
 }
 .canopy-card:hover, .canopy-card:focus {
   color: var(--color-accent-default);
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.07);
 }
 
 .canopy-article-card {
@@ -323,7 +337,6 @@ section[data-footnotes] ul li,
   background: color-mix(in srgb, var(--color-accent-500) 38.2%, transparent);
   color: inherit;
   padding: 0.05rem 0.25rem;
-  border-radius: 0.2rem;
 }
 
 @layer base {
@@ -438,14 +451,21 @@ section[data-footnotes] ul li,
     flex-grow: 1;
   }
   .canopy-nav-tree__toggle {
-    appearance: none;
-    border: none;
-    background: transparent;
-    padding: 0.5rem;
     display: inline-flex;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: center;
+    gap: 0.35rem;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid currentColor;
+    color: inherit;
+    font: inherit;
+    text-decoration: none;
     cursor: pointer;
+    line-height: 1.4;
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+    appearance: none;
+    border: none;
+    justify-content: flex-end;
     width: 40px;
     height: 40px;
   }
@@ -601,13 +621,21 @@ section[data-footnotes] ul li,
 }
 
 .canopy-index__more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
   padding: 0.45rem 1rem;
-  font-size: 0.8333rem;
-  border: 1px solid var(--color-accent-200);
-  border-radius: 999px;
+  border: 1px solid currentColor;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.4;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  border-color: var(--color-accent-200);
   background: var(--color-accent-100);
   color: var(--color-accent-default);
-  cursor: pointer;
 }
 
 .canopy-index__more:hover {
@@ -708,7 +736,6 @@ section[data-footnotes] ul li,
     align-items: center;
     gap: 1.618rem;
     padding: 1rem 1.618rem;
-    background: transparent;
     z-index: 1;
   }
   .canopy-header__brand {
@@ -722,10 +749,18 @@ section[data-footnotes] ul li,
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    gap: 0.35rem;
+    padding: 0.25rem 0.75rem;
+    border: 1px solid currentColor;
+    color: inherit;
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    line-height: 1.4;
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
     width: 2.5rem;
     height: 2.5rem;
-    border-radius: 0.75rem;
-    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+    border: none;
   }
   .canopy-header__menu:hover,
   .canopy-header__menu:focus-visible {
@@ -769,11 +804,8 @@ section[data-footnotes] ul li,
   }
   .canopy-language-toggle__select-input {
     border: 1px solid var(--color-gray-300);
-    border-radius: 999px;
     padding: 0.25rem 2rem 0.25rem 0.75rem;
-    background: var(--color-white);
     color: var(--color-gray-900);
-    font-weight: 600;
     appearance: none;
     min-width: 6.5rem;
     cursor: pointer;
@@ -797,15 +829,20 @@ section[data-footnotes] ul li,
   }
   .canopy-language-toggle__button,
   .canopy-language-toggle__nav a {
-    text-decoration: none;
-    font-weight: 600;
-    color: var(--color-gray-700);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
     padding: 0.15rem 0.5rem;
-    border-radius: 999px;
-    border: none;
-    background: transparent;
-    transition: color 150ms ease, background 150ms ease;
+    border: 1px solid currentColor;
+    color: inherit;
+    font: inherit;
+    text-decoration: none;
     cursor: pointer;
+    line-height: 1.4;
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+    border: none;
+    color: var(--color-gray-700);
   }
   .canopy-language-toggle__button[data-active=true],
   .canopy-language-toggle__nav a[data-active=true] {
@@ -857,12 +894,19 @@ section[data-footnotes] ul li,
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    gap: 0.35rem;
+    padding: 0.25rem 0.75rem;
+    border: 1px solid currentColor;
+    color: inherit;
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    line-height: 1.4;
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
     width: 2.5rem;
     height: 2.5rem;
-    border-radius: 0.75rem;
     color: var(--color-accent-900);
-    cursor: pointer;
-    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+    border: none;
   }
   .canopy-header__icon-button svg path {
     stroke-width: 2.618px;
@@ -895,9 +939,7 @@ section[data-footnotes] ul li,
   }
   .canopy-modal--search .canopy-search-teaser {
     position: static;
-    background: transparent;
     border: none;
-    box-shadow: none;
     max-height: clamp(20rem, 60vh, 32rem);
     padding: 0;
     display: block;
@@ -1024,17 +1066,23 @@ section[data-footnotes] ul li,
     padding: 0.618rem 0;
   }
   .canopy-modal__nav-toggle {
-    appearance: none;
-    border: none;
-    background: transparent;
-    padding: 0.25rem;
-    margin: -0.25rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    justify-content: flex-end;
+    gap: 0.35rem;
+    padding: 0.25rem 0.25rem;
+    border: 1px solid currentColor;
+    color: inherit;
+    font: inherit;
+    text-decoration: none;
     cursor: pointer;
+    line-height: 1.4;
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+    appearance: none;
+    border: none;
+    margin: -0.25rem;
     flex-grow: 1;
+    justify-content: flex-end;
   }
   .canopy-modal__nav-toggle:hover, .canopy-modal__nav-toggle:focus {
     color: var(--color-accent-default);
@@ -1119,8 +1167,6 @@ section[data-footnotes] ul li,
     max-width: 400px;
     max-height: min(90vh, 640px);
     background: var(--color-gray-50);
-    border-radius: 1rem;
-    box-shadow: 12px 24px 48px rgba(0, 0, 0, 0.5);
     overflow: hidden;
     margin: 0;
   }
@@ -1148,18 +1194,25 @@ section[data-footnotes] ul li,
     color: var(--color-gray-900);
   }
   .canopy-modal__close {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    gap: 0.35rem;
+    padding: 0.25rem 0.75rem;
+    border: 1px solid currentColor;
+    color: inherit;
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    line-height: 1.4;
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
     width: 2.5rem;
     height: 2.5rem;
-    border-radius: 9999px;
     color: var(--color-accent-900);
-    cursor: pointer;
-    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+    border: none;
   }
   .canopy-modal__close svg path {
     stroke-width: 2.618px;
@@ -1183,14 +1236,11 @@ section[data-footnotes] ul li,
       width: 100%;
       height: 100%;
       max-height: none;
-      border-radius: 0;
       margin: 0;
-      box-shadow: none;
     }
     .canopy-modal__close {
       top: 1rem;
       right: 1rem;
-      border-radius: 0.75rem;
     }
     .canopy-modal__brand {
       margin-bottom: 1rem;
@@ -1234,10 +1284,9 @@ section[data-footnotes] ul li,
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
+  padding: clamp(1.618rem, 5vw, 3rem) clamp(1.618rem, 4vw, 3rem);
   box-sizing: border-box;
   min-width: 0;
-  background: transparent;
 }
 .canopy-interstitial--hero .canopy-interstitial__body {
   align-items: flex-start;
@@ -1247,9 +1296,6 @@ section[data-footnotes] ul li,
   margin: 0;
   gap: 1.5rem;
 }
-.canopy-interstitial--hero .canopy-interstitial__actions {
-  justify-content: flex-start;
-}
 .canopy-interstitial--hero .canopy-interstitial__media-group {
   flex: 1;
   position: relative;
@@ -1261,7 +1307,6 @@ section[data-footnotes] ul li,
   box-sizing: border-box;
   min-width: 0;
   overflow: hidden;
-  background: transparent;
 }
 .canopy-interstitial--hero .canopy-interstitial__caption {
   position: static;
@@ -1281,10 +1326,16 @@ section[data-footnotes] ul li,
   padding-bottom: 2px;
 }
 @media (max-width: 63.9375rem) {
+  .canopy-interstitial--hero {
+    background: none !important;
+  }
   .canopy-interstitial--hero .canopy-interstitial__panel,
   .canopy-interstitial--hero .canopy-interstitial__media-group {
     width: 100%;
   }
+  .canopy-interstitial--hero .canopy-interstitial__media-group {
+    padding: 1rem 0 !important;
+  }
 }
 @media (min-width: 48rem) {
   .canopy-interstitial--hero .canopy-interstitial__layout {
@@ -1365,7 +1416,6 @@ section[data-footnotes] ul li,
   width: 100%;
   min-height: var(--hero-height);
   overflow: hidden;
-  background-color: color-mix(in srgb, var(--hero-bg-start) 65%, transparent);
 }
 .canopy-interstitial__pane::before, .canopy-interstitial__pane::after {
   content: "";
@@ -1382,7 +1432,6 @@ section[data-footnotes] ul li,
   display: flex;
   flex-direction: column;
   height: var(--hero-height);
-  background-color: transparent;
 }
 .canopy-interstitial__media {
   position: absolute;
@@ -1399,7 +1448,6 @@ section[data-footnotes] ul li,
   height: 100%;
   flex: 1 1 auto;
   overflow: hidden;
-  border-radius: 0.75rem;
 }
 .canopy-interstitial__media--static {
   position: static;
@@ -1449,12 +1497,6 @@ section[data-footnotes] ul li,
   margin: 0;
   max-width: 42rem;
 }
-.canopy-interstitial__actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.75rem;
-}
 .canopy-interstitial__caption {
   position: absolute;
   bottom: 1.75rem;
@@ -1474,20 +1516,27 @@ section[data-footnotes] ul li,
   pointer-events: none;
 }
 .canopy-interstitial__nav-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.75rem;
+  border: 1px solid currentColor;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.4;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 2.618rem !important;
   height: 2.618rem !important;
-  border-radius: 9999px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
-  stroke: var(--color-accent-default) !important;
-  color: var(--color-accent-default) !important;
+  color: var(--color-gray-50) !important;
+  background-color: var(--color-accent-default) !important;
   pointer-events: auto;
+  border: none;
 }
 .canopy-interstitial__nav-btn::after {
   content: none;
@@ -1497,13 +1546,13 @@ section[data-footnotes] ul li,
   display: block;
   width: 1rem;
   height: 1rem;
-  stroke: var(--color-accent-default);
+  stroke: var(--color-gray-50);
 }
 .canopy-interstitial__nav-btn--prev {
-  left: 1.5rem;
+  left: 0 !important;
 }
 .canopy-interstitial__nav-btn--next {
-  right: 1.5rem;
+  right: 0 !important;
 }
 .canopy-interstitial__pagination {
   position: absolute;
@@ -1518,7 +1567,6 @@ section[data-footnotes] ul li,
   display: inline-block;
   width: 0.45rem;
   height: 0.45rem;
-  border-radius: 9999px;
   background-color: var(--hero-dot-bg);
   opacity: 1;
   transition: transform 0.2s ease, background-color 0.2s ease;
@@ -1563,9 +1611,7 @@ section[data-footnotes] ul li,
   width: 100%;
   height: var(--canopy-iiif-image-height);
   background-color: var(--canopy-iiif-image-bg);
-  border-radius: 0.5rem;
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
 }
 .canopy-iiif-image__placeholder > script {
   display: none;
@@ -1635,12 +1681,9 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   color: inherit;
   border: 1px solid var(--color-gray-200);
   overflow: hidden;
-  border-radius: 0.5rem;
   transition: all 150ms cubic-bezier(0.22, 1, 0.36, 1);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
 }
 .canopy-slider figure > div {
-  border-radius: 3px;
   overflow: hidden;
 }
 .canopy-slider figcaption {
@@ -1711,11 +1754,9 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   --storiiies-viewer-row-gap: 0.618rem;
   --storiiies-viewer-button-bg: var(--color-accent-default);
   --storiiies-viewer-button-fg: var(--color-gray-50);
-  border-radius: 0.5rem;
   position: relative;
   display: block;
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.0509803922);
 }
 .canopy-image-story.storiiies-viewer .storiiies-viewer__info-text {
   margin-top: 1.618rem;
@@ -1736,8 +1777,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   color: var(--color-gray-900);
 }
 .canopy-image-story.storiiies-viewer .storiiies-viewer__info-area {
-  border-radius: 0.5rem;
-  box-shadow: 5px 5px 21px rgba(0, 0, 0, 0.0666666667);
   font-weight: 300;
 }
 .canopy-image-story.storiiies-viewer[data-canopy-image-story] {
@@ -1749,7 +1788,7 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   --search-form-label-padding-y: 0.625rem;
   position: relative;
   backdrop-filter: blur(12px);
-  transition: box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease;
+  transition: background-color var(--duration-fast) ease;
   background-color: var(--color-gray-50);
   cursor: text;
   padding-right: 0.4rem;
@@ -1769,9 +1808,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   text-overflow: ellipsis;
   transition: opacity var(--duration-fast) ease;
 }
-.canopy-search-form-shell:hover {
-  box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06));
-}
 .canopy-search-form-shell svg {
   width: 1.25rem;
   height: 1.25rem;
@@ -1784,8 +1820,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   width: 100%;
   border: 0;
   outline: none;
-  background: transparent;
-  box-shadow: none;
   caret-color: transparent;
   transition: opacity var(--duration-fast) ease;
 }
@@ -1809,14 +1843,11 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   align-items: center;
   gap: 0.5rem;
   border: 1px solid var(--color-gray-200);
-  border-radius: 0.75rem;
   color: var(--color-gray-muted);
-  box-shadow: var(--shadow-sm);
-  transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard);
+  transition: border-color var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard);
 }
 .canopy-search-form:focus-within {
   border-color: var(--color-accent-500);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-500) 45%, transparent), var(--shadow-sm);
 }
 .canopy-search-form:focus-within .canopy-search-form__icon {
   color: var(--color-accent-500);
@@ -1836,17 +1867,25 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 }
 
 .canopy-search-form__clear {
-  border: 0;
-  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.25rem;
+  border: 1px solid currentColor;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.4;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  border: none;
+  background: none;
   color: rgba(100, 116, 139, 0.9);
   font-size: 1.25rem;
   line-height: 1;
   padding: 0 0.25rem;
   margin-right: 0.25rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
   transition: color var(--duration-fast) var(--easing-standard);
 }
 .canopy-search-form__clear:hover, .canopy-search-form__clear:focus-visible {
@@ -1854,8 +1893,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 }
 .canopy-search-form__clear:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--color-gray-100), 0 0 0 4px color-mix(in srgb, var(--color-accent-800) 65%, transparent);
-  border-radius: 999px;
 }
 
 .canopy-search-form__input {
@@ -1864,7 +1901,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   padding: 0.125rem 0;
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
-  background: transparent;
   border: 0;
   color: inherit;
   outline: none;
@@ -1877,25 +1913,28 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 .canopy-search-form__submit {
   display: inline-flex;
   align-items: center;
-  gap: 0.382rem;
-  border-radius: 0.382rem;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.382rem 0.618rem;
+  border: 1px solid currentColor;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.4;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
   margin-right: 1px;
-  border: 0;
+  border-color: var(--color-accent-default);
   background: var(--color-accent-default);
   color: var(--color-accent-50);
-  font-weight: 300;
-  font-size: 1rem;
-  padding: 0.382rem 0.618rem;
+  gap: 0.382rem;
   transition: background-color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
-  cursor: pointer;
 }
 .canopy-search-form__submit:hover, .canopy-search-form__submit:focus-visible {
   background: var(--color-accent-800);
-  box-shadow: var(--shadow-md);
 }
 .canopy-search-form__submit:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--color-gray-100), 0 0 0 4px color-mix(in srgb, var(--color-accent-500) 65%, transparent);
 }
 .canopy-search-form__submit:active {
   transform: translateY(1px);
@@ -1925,31 +1964,46 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   margin-bottom: 1rem;
 }
 .canopy-search-tabs button {
-  background: none;
-  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
   padding: 0.382rem 0.618rem;
-  font-size: 1rem;
+  border: 1px solid currentColor;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
   cursor: pointer;
+  line-height: 1.4;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  border: none;
+  font-size: 1rem;
   color: var(--color-gray-muted);
   transition: all 0.2s ease-in-out;
 }
 .canopy-search-tabs button.active, .canopy-search-tabs button:hover {
   color: var(--color-accent-default);
   background-color: var(--color-accent-100);
-  border-radius: 0.382rem;
   font-weight: 400;
 }
 
 .canopy-search-form-modal .canopy-search-form-modal__trigger {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  justify-content: center;
+  gap: 0.35rem;
   padding: 0.25rem 0.5rem;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid currentColor;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.4;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  gap: 0.25rem;
+  border-color: var(--color-gray-200);
   color: var(--color-gray-muted);
   background: var(--color-gray-100);
-  border-radius: 6px;
-  cursor: pointer;
 }
 .canopy-search-form-modal .canopy-search-form-modal__overlay {
   position: fixed;
@@ -1967,20 +2021,28 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   min-width: 320px;
   max-width: 720px;
   width: 90%;
-  border-radius: 8px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   font-family: var(--canopy-font-sans, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif);
 }
 .canopy-search-form-modal .canopy-search-form-modal__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.125rem 0.5rem;
+  border: 1px solid currentColor;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.4;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
   position: absolute;
   top: 8px;
   right: 8px;
-  border: 1px solid var(--color-gray-200);
+  border-color: var(--color-gray-200);
   background: var(--color-gray-100);
-  border-radius: 6px;
   padding: 2px 6px;
-  cursor: pointer;
 }
 .canopy-search-form-modal .canopy-search-form-modal__inputWrap {
   padding: 10px 12px;
@@ -1990,7 +2052,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   width: 100%;
   padding: 8px 10px;
   border: 1px solid var(--color-gray-200);
-  border-radius: 6px;
   outline: none;
 }
 .canopy-search-form-modal .canopy-search-form-modal__list {
@@ -2007,7 +2068,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   width: 40px;
   height: 40px;
   object-fit: cover;
-  border-radius: 4px;
 }
 .canopy-search-form-modal .canopy-search-form-modal__title {
   font-size: var(--font-size-sm);
@@ -2027,8 +2087,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   top: calc(100% + 4px);
   background: var(--color-gray-50);
   border: 1px solid var(--color-gray-200);
-  border-radius: 8px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
   z-index: 1000;
   overflow: auto;
   max-height: 60vh;
@@ -2055,7 +2113,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   align-items: center;
   gap: 0.618rem;
   padding: 0.382rem;
-  border-radius: 0.6rem;
   text-decoration: none;
   color: var(--color-gray-900);
   transition: background 120ms ease;
@@ -2068,7 +2125,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 .canopy-search-teaser__thumb {
   flex: 0 0 48px;
   height: 48px;
-  border-radius: 0.5rem;
   overflow: hidden;
   background: var(--color-gray-100);
   display: flex;
@@ -2144,7 +2200,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   }
   .canopy-search-filters__facet {
     border: 1px solid var(--color-gray-200);
-    border-radius: 0.75rem;
     background: var(--color-gray-50);
     overflow: hidden;
   }
@@ -2183,20 +2238,17 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   .canopy-search-filters__quick-input {
     flex: 1;
     min-width: 0;
-    border-radius: 0.5rem;
     border: 1px solid var(--color-gray-300);
     padding: 0.375rem 0.75rem;
     font-size: var(--font-size-sm);
     color: var(--color-gray-muted);
-    transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
+    transition: border-color var(--duration-fast) var(--easing-standard);
   }
   .canopy-search-filters__quick-input:focus {
     outline: none;
     border-color: var(--color-accent-500);
-    box-shadow: 0 0 0 1px var(--color-accent-500);
   }
   .canopy-search-filters__quick-clear {
-    border-radius: 0.375rem;
     border: 1px solid var(--color-gray-200);
     padding: 0.25rem 0.5rem;
     font-size: var(--font-size-xs);
@@ -2227,7 +2279,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
     margin-top: 0.25rem;
     width: 1rem;
     height: 1rem;
-    border-radius: 0.375rem;
     border: 1px solid var(--color-gray-300);
     color: var(--color-accent-500);
     accent-color: var(--color-accent-500);
@@ -2257,15 +2308,22 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
     gap: 0.75rem;
   }
   .canopy-search-filters__button {
-    border-radius: 9999px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
     padding: 0.5rem 1.25rem;
-    font-size: var(--font-size-sm);
+    border: 1px solid currentColor;
+    color: inherit;
+    font: inherit;
+    text-decoration: none;
     cursor: pointer;
-    transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
+    line-height: 1.4;
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+    font-size: var(--font-size-sm);
   }
   .canopy-search-filters__button--secondary {
     border: 1px solid var(--color-gray-300);
-    background: transparent;
     color: var(--color-gray-muted);
   }
   .canopy-search-filters__button--secondary:hover,
@@ -2313,14 +2371,24 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 }
 
 .canopy-search-tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.75rem;
+  border: 1px solid currentColor;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.4;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
   position: relative;
   border: none;
-  background: transparent;
-  padding: 0.25rem 0.75rem 0.5rem;
+  padding-bottom: 0.5rem;
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--color-gray-muted);
-  cursor: pointer;
 }
 
 .canopy-search-tab.is-active {
@@ -2332,7 +2400,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   bottom: -3px;
   left: 0;
   height: 3px; /* underline */
-  border-radius: 999px;
   background: var(--color-accent-default);
   pointer-events: none;
   opacity: 0;
@@ -2450,7 +2517,7 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   display: flex;
   flex-direction: column;
   gap: 0.618rem;
-  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, padding 150ms ease;
+  transition: background-color 150ms ease, border-color 150ms ease, padding 150ms ease;
   color: var(--color-gray-muted);
 }
 
@@ -2458,7 +2525,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   padding: 0.25rem;
   border-color: transparent;
   background: none;
-  box-shadow: none;
 }
 
 .canopy-content-navigation--floating {
@@ -2473,16 +2539,21 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 }
 
 .canopy-content-navigation__toggle {
-  align-self: flex-end;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
-  font-size: 1rem;
-  font-weight: 500;
+  gap: 0.35rem;
+  padding: 0.35rem 0.75rem;
+  border: 1px solid currentColor;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
   cursor: pointer;
-  line-height: 1.2;
-  transition: color 150ms ease;
+  line-height: 1.4;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  align-self: flex-end;
+  color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
+  border: none;
 }
 
 .canopy-content-navigation__toggle:hover,
@@ -2572,7 +2643,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 .canopy-diagram__grid article {
-  border-radius: 1.25rem;
   background: linear-gradient(173deg, transparent 0%, var(--color-accent-200) 100%);
   padding: 1rem 1.618rem;
 }
@@ -2720,13 +2790,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   pointer-events: none;
   z-index: 1;
 }
-.canopy-timeline__step--start .canopy-timeline__step-line {
-  background: transparent;
-}
-.canopy-timeline__step--end .canopy-timeline__step-line {
-  background: transparent;
-}
-
 .canopy-timeline__step-line {
   width: 1.5rem;
   height: 0.125rem;
@@ -2767,12 +2830,10 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 .canopy-timeline__point,
 .canopy-timeline__group {
   width: min(100%, 28rem);
-  border-radius: 1.25rem;
   border: 1px solid var(--color-gray-200);
   background: var(--color-gray-50);
   padding: 1rem 1.25rem;
-  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
-  transition: border-color 150ms ease, box-shadow 150ms ease;
+  transition: border-color 150ms ease;
   display: flex;
   flex-direction: column;
 }
@@ -2811,14 +2872,12 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 .canopy-timeline__connector-line {
   width: clamp(2.618rem, 6vw, 2.618rem);
   height: 0.125rem;
-  border-radius: 999px;
   background: var(--color-accent-default);
 }
 
 .canopy-timeline__connector-dot {
   width: 0.618rem;
   height: 0.618rem;
-  border-radius: 50%;
   background: var(--color-accent-default);
   border: 2px solid var(--color-accent-default);
 }
@@ -2860,12 +2919,22 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 }
 
 .canopy-timeline__group-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid currentColor;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.4;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
   font-size: 1rem;
-  background: transparent;
   border: none;
   color: var(--color-accent-default);
   font-weight: 500;
-  cursor: pointer;
 }
 
 .canopy-timeline__group-points {
@@ -2876,13 +2945,22 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 }
 
 .canopy-timeline__group-point {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid currentColor;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.4;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
   width: 100%;
-  border-radius: 0.85rem;
-  border: 1px solid var(--color-gray-200);
+  border-color: var(--color-gray-200);
   background: color-mix(in srgb, var(--color-gray-50) 70%, #fff);
-  padding: 0.75rem 1rem;
   text-align: left;
-  cursor: pointer;
 }
 
 .canopy-timeline__group-point.is-active {
@@ -2930,7 +3008,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   position: relative;
   width: 100%;
   min-height: 320px;
-  border-radius: 0.5rem;
   overflow: hidden;
   background-color: var(--color-gray-100);
   z-index: 0;
@@ -2972,12 +3049,10 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   max-width: 320px;
   z-index: 4;
   padding: 0.5rem 0.75rem;
-  border-radius: 999px;
   background-color: rgba(15, 23, 42, 0.85);
   color: var(--color-gray-50);
   font-size: 0.875rem;
   line-height: 1.25rem;
-  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
   pointer-events: auto;
 }
 .canopy-map__key {
@@ -3006,7 +3081,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 .canopy-map__key-dot {
   width: 12px;
   height: 12px;
-  border-radius: 999px;
   background-color: var(--color-accent-default);
   flex-shrink: 0;
 }
@@ -3021,7 +3095,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 }
 .canopy-map__popup-media {
   width: 100%;
-  border-radius: 0.25rem;
   overflow: hidden;
 }
 .canopy-map__popup-media img {
@@ -3094,7 +3167,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   color: var(--color-gray-muted);
 }
 .canopy-map .leaflet-marker-icon.canopy-map__marker {
-  background: transparent;
   border: none;
   width: auto;
   height: auto;
@@ -3109,8 +3181,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 .canopy-map__marker-thumb, .canopy-map__marker-solid {
   width: 40px;
   height: 40px;
-  border-radius: 999px;
-  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.35);
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -3134,7 +3204,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   background: var(--color-accent-600);
 }
 .canopy-map__marker--label {
-  background: transparent;
   border: none;
 }
 .canopy-map__marker--label.is-hovered .canopy-map__marker-label {
@@ -3143,9 +3212,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 .canopy-map__marker--label.is-hovered .canopy-map__marker-label-text {
   opacity: 1;
 }
-.canopy-map__marker--label.is-hovered .canopy-map__marker-label-text {
-  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
-}
 .canopy-map__marker-label {
   display: inline-flex;
   align-items: center;
@@ -3155,13 +3221,11 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   background: rgba(255, 255, 255, 0.8666666667);
   white-space: nowrap;
   position: relative;
-  border-radius: 999px;
   padding-left: 4px;
 }
 .canopy-map__marker-label-dot {
   width: 12px;
   height: 12px;
-  border-radius: 999px;
   background-color: var(--color-accent-default);
   flex-shrink: 0;
   cursor: default;
@@ -3183,13 +3247,11 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   font-weight: 500;
   width: 40px;
   height: 40px;
-  border-radius: 999px;
   background: var(--color-gray-default);
   color: var(--color-gray-50);
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
   box-sizing: content-box;
 }
 
@@ -3242,8 +3304,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   height: 100%;
   padding: clamp(0.75rem, 1vw, 1rem);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--canopy-gallery-radius, 1rem);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
 }
 .canopy-gallery__item:focus-within {
   outline: 2px solid var(--color-accent-default, #3b82f6);
@@ -3253,7 +3313,6 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   position: relative;
   aspect-ratio: 1/1;
   overflow: hidden;
-  border-radius: calc(var(--canopy-gallery-radius, 1rem) - 0.25rem);
   background: var(--color-gray-100);
 }
 .canopy-gallery__media img,
@@ -3310,12 +3369,10 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 .canopy-gallery__trigger {
   position: absolute;
   inset: 0;
-  border-radius: inherit;
   text-decoration: none;
   border: 0;
   z-index: 2;
   color: inherit;
-  background: transparent;
 }
 
 .canopy-gallery__modals {
@@ -3439,8 +3496,6 @@ body[data-canopy-gallery-locked="1"] {
   width: min(960px, 100% - clamp(2rem, 4vw, 4rem));
   height: auto;
   max-height: min(90vh, 960px);
-  border-radius: 0.75rem;
-  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.45);
 }
 
 .canopy-gallery--popup-full .canopy-gallery__modal-scrim {
@@ -3466,7 +3521,6 @@ body[data-canopy-gallery-locked="1"] {
 }
 .canopy-gallery__nav-viewport::-webkit-scrollbar-thumb {
   background-color: rgba(15, 23, 42, 0.2);
-  border-radius: 0.5rem;
 }
 .canopy-gallery__nav-list {
   margin: 0;
@@ -3488,7 +3542,6 @@ body[data-canopy-gallery-locked="1"] {
   display: inline-flex;
   flex-direction: column;
   text-decoration: none;
-  border-radius: 0.75rem;
   background: var(--color-gray-50);
   color: inherit;
   width: 100%;
@@ -3507,7 +3560,6 @@ body[data-canopy-gallery-locked="1"] {
 .canopy-gallery__nav-thumb {
   width: 100%;
   aspect-ratio: 1/1;
-  border-radius: 0.5rem;
   overflow: hidden;
   padding: 1px;
   outline: 3px solid var(--color-gray-50);
@@ -3522,16 +3574,25 @@ body[data-canopy-gallery-locked="1"] {
   display: block;
   opacity: 1;
   transition: all 0.2s ease;
-  border-radius: 0.5rem;
 }
 .canopy-gallery__nav-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.75rem;
+  border: 1px solid currentColor;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.4;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
   flex: 0 0 auto;
   width: 5rem;
   height: 100%;
   color: var(--color-gray-900);
   font-size: 1.25rem;
-  font-weight: 500;
-  cursor: pointer;
   display: none;
   align-items: center;
   justify-content: center;
@@ -3539,6 +3600,7 @@ body[data-canopy-gallery-locked="1"] {
   top: 50%;
   transform: translateY(-50%);
   z-index: 5;
+  border: none;
   background: linear-gradient(to right, transparent, transparent);
 }
 .canopy-gallery__nav-button--prev {