@import "/ui/rc-foundation.css";

/* Integrated navigation and the shared interface foundation. Artwork keeps its own type. */
body[data-site-surface="color"] .masthead,
body[data-site-surface="color"] .review-notes,
body[data-site-surface="create"] > .nav,
body[data-site-surface="create"] > .demo-ribbon,
body[data-site-surface="services"] > .site-header,
body[data-site-surface="services"] > .demo-bar,
body[data-site-surface="services"] .state-control,
body[data-site-surface="services"] #context-bar,
body[data-site-surface="services"] footer a[href="index.html"],
body[data-site-surface="create"] .page-footer a[href="#states"] {
  display: none !important;
}
body[data-site-surface="color"] .arrival {
  padding-top: 18px;
}
body[data-site-surface="color"] .site-footer {
  padding-bottom: 28px;
}
body[data-site-surface="services"] #context-bar {
  position: relative;
  top: auto;
}
.site-saved-colors {
  padding: 36px 0;
  border-top: 1px solid #cbd1cb;
  margin-top: 44px;
}
.site-saved-colors h2 {
  font-size: 28px;
  margin-bottom: 18px;
}
.site-saved-color {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 80px;
  color: #1d2b24;
}
.site-saved-color img {
  width: 64px;
  height: 64px;
  object-fit: cover;
}
.site-saved-color small {
  display: block;
  margin-top: 6px;
}
.site-return-help {
  font-size: 13px;
  color: var(--rc-muted);
}
@media (max-width: 600px) {
  body[data-site-surface="color"] .arrival {
    padding-top: 12px;
  }
}

/* A shared, quiet interaction language across the three consumer experiences. */
body[data-site-surface] {
  --rc-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rc-focus: #315b46;
  scrollbar-color: #87978b #f4f5f0;
  accent-color: #315b46;
}
body[data-site-surface] ::selection {
  background: #d8e4ce;
  color: #14251b;
}
body[data-site-surface] :is(input, textarea) {
  caret-color: #315b46;
}
body[data-site-surface]
  :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--rc-focus);
  outline-offset: 4px;
}
body[data-site-surface] :is(a, button) {
  text-underline-offset: 0.22em;
  touch-action: manipulation;
}
body[data-site-surface] :is(button, a, input, textarea, select) {
  transition-timing-function: var(--rc-motion-ease);
}
body[data-site-surface] :is(h1, h2, h3) {
  text-wrap: balance;
}
body[data-site-surface] :is(input, textarea, select):disabled {
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  body[data-site-surface] {
    scroll-behavior: auto;
  }
}