/* Stable Board slots for validated Theme Pack variables. */

.home-theme-selector {
  display: none;
}

.tile-expanded .home-theme-selector {
  align-items: center;
  color: var(--theme-location-ink, var(--theme-pack-ink));
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  font-family: var(--theme-location-expanded-text-font, var(--theme-pack-font-expanded-text));
  font-size: var(--theme-pack-action-size);
  gap: .18rem;
  line-height: 1.15;
  max-width: 100%;
  position: relative;
  white-space: nowrap;
  z-index: 3;
}

.home-theme-question {
  display: block;
  font-size: var(--theme-pack-expanded-text-size);
}

.home-theme-action {
  align-items: center;
  background: var(--theme-pack-link-bg);
  border: var(--theme-pack-action-border);
  border-radius: var(--theme-pack-action-radius);
  box-shadow: var(--theme-pack-action-shadow);
  box-sizing: border-box;
  color: var(--theme-pack-link);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 1em;
  font-weight: var(--theme-pack-font-action-weight);
  justify-content: center;
  letter-spacing: var(--theme-pack-action-letter-spacing);
  min-height: 34px;
  max-width: 100%;
  padding: .22rem .62rem;
  position: relative;
  text-decoration-line: var(--theme-pack-action-text-decoration);
  text-decoration-style: var(--theme-pack-action-decoration-style);
  text-decoration-thickness: var(--theme-pack-action-decoration-thickness);
  text-underline-offset: var(--theme-pack-action-underline-offset);
}

.home-theme-chevron {
  display: inline-block;
  font-family: inherit;
  margin-left: .18rem;
}

.home-theme-action select {
  background: var(--theme-pack-selector-bg);
  border-color: var(--theme-pack-selector-border);
  border-radius: var(--theme-pack-selector-radius);
  border-style: var(--theme-pack-selector-border-style);
  border-width: var(--theme-pack-selector-border-width);
  color: var(--theme-pack-selector-ink);
  cursor: pointer;
  font-size: var(--theme-pack-font-selector-size);
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.home-theme-action:focus-within {
  outline: 3px solid var(--theme-pack-focus);
  outline-offset: 3px;
}

.theme-ambient {
  position: absolute;
  inset: -100vh -100vw;
  z-index: 0;
  pointer-events: none;
  background: var(--theme-pack-ambient-bg);
  display: var(--theme-pack-ambient-display);
}

.theme-ambient::before,
.theme-ambient::after {
  content: "";
  position: absolute;
  width: var(--theme-pack-ambient-mark-width);
  height: var(--theme-pack-ambient-mark-height);
  border-style: solid;
  border-width: var(--theme-pack-ambient-mark-border);
  border-color: var(--theme-pack-ambient-mark-border-color);
  border-radius: var(--theme-pack-ambient-mark-radius);
  background: var(--theme-pack-ambient-mark-bg);
  filter: var(--theme-pack-ambient-mark-filter);
}

.theme-ambient::before {
  left: var(--theme-pack-ambient-before-left);
  top: var(--theme-pack-ambient-before-top);
  transform: var(--theme-pack-ambient-before-transform);
}

.theme-ambient::after {
  right: var(--theme-pack-ambient-after-right);
  bottom: var(--theme-pack-ambient-after-bottom);
  transform: var(--theme-pack-ambient-after-transform);
}

.theme-object {
  position: absolute;
  left: -6%;
  top: -6%;
  width: 112%;
  height: 112%;
  overflow: visible;
  transform: none;
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
}

.tile-expanded .theme-object {
  left: -7%;
  top: -5%;
  width: 114%;
  height: 110%;
  opacity: .98;
}

.scrap-title,
.expanded-title,
.expanded-text,
.expanded-open,
.button {
  position: relative;
  z-index: 2;
}

html[data-theme-pack-visual] .map::before {
  background-color: var(--theme-pack-board-bg-color);
  background-image: var(--theme-pack-board-bg-image);
  background-size: var(--theme-pack-board-bg-size);
}

html[data-theme-pack-visual],
html[data-theme-pack-visual] body,
html[data-theme-pack-visual].main {
  background: var(--theme-pack-shell-bg);
}

html[data-theme-pack-visual] .tile-container,
html[data-theme-pack-visual] .tile-container.expanded,
html[data-theme-pack-visual] .tile-container.connected,
html[data-theme-pack-visual] .tile-container.dimmed,
html[data-theme-pack-visual] .tile-container:hover,
html[data-theme-pack-visual] .tile-container.expanded:hover {
  width: var(--theme-pack-tile-size);
  height: var(--theme-pack-tile-size);
}

html[data-theme-pack-visual] .tile-expanded,
html[data-theme-pack-visual] .tile-container.sticky .tile-expanded,
html[data-theme-pack-visual] .tile-container.scrap .tile-expanded {
  width: var(--theme-location-expanded-width, var(--theme-pack-expanded-width));
  min-height: var(--theme-location-expanded-min-height, var(--theme-pack-expanded-min-height));
}

html[data-theme-pack-visual] .tile-base > .tape,
html[data-theme-pack-visual] .tile-expanded > .tape {
  display: var(--theme-pack-tape-display);
}

html[data-theme-pack-visual] .navbar::before,
html[data-theme-pack-visual] .navbar::after {
  display: var(--theme-pack-chrome-decoration-display);
  width: var(--theme-pack-chrome-decoration-width);
  height: var(--theme-pack-chrome-decoration-height);
  background: var(--theme-pack-chrome-decoration-bg);
  border: var(--theme-pack-chrome-decoration-border);
  box-shadow: var(--theme-pack-chrome-decoration-shadow);
  top: var(--theme-pack-chrome-decoration-top);
}

html[data-theme-pack-visual] .navbar::before {
  left: var(--theme-pack-chrome-decoration-before-left);
  transform: var(--theme-pack-chrome-decoration-before-transform);
}

html[data-theme-pack-visual] .navbar::after {
  right: var(--theme-pack-chrome-decoration-after-right);
  transform: var(--theme-pack-chrome-decoration-after-transform);
}

html[data-theme-pack-visual] .tile-container .paper-body,
html[data-theme-pack-visual] .tile-container.sticky .paper-body,
html[data-theme-pack-visual] .tile-container.scrap .paper-body,
html[data-theme-pack-visual] .tile-container[class*="shape-"] .paper-body,
html[data-theme-pack-visual] .tile-expanded[class*="shape-"] .paper-body {
  clip-path: none;
  background: transparent;
  border-radius: 0;
  filter: var(--theme-pack-tile-shadow);
  overflow: visible;
  padding:
    var(--theme-safe-top)
    var(--theme-safe-right)
    var(--theme-safe-bottom)
    var(--theme-safe-left) !important;
}

html[data-theme-pack-visual] .tile-base:hover .paper-body {
  filter: var(--theme-pack-tile-hover-shadow);
}

html[data-theme-pack-visual] .tile-base:hover {
  transform:
    rotate(calc(var(--rot, 0deg) * var(--theme-pack-hover-rotation-factor)))
    translate(var(--jitter-x, 0), calc(var(--jitter-y, 0) + var(--theme-pack-hover-lift)))
    scale(var(--theme-pack-hover-scale));
}

html[data-theme-pack-visual] .tile-container .scrap-title::after {
  display: var(--theme-pack-title-underline-display);
}

html[data-theme-pack-visual] .scrap-title {
  color: var(--theme-location-ink, var(--theme-pack-ink)) !important;
  font-family: var(--theme-location-base-font, var(--theme-pack-font-base-title)) !important;
  font-size: var(--theme-pack-base-title-size);
  font-weight: var(--theme-pack-font-base-title-weight);
  letter-spacing: var(--theme-location-base-letter-spacing, normal);
  line-height: var(--theme-pack-base-title-line-height);
  text-shadow: var(--theme-pack-text-shadow);
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

html[data-theme-pack-visual] .expanded-title {
  color: var(--theme-location-ink, var(--theme-pack-ink)) !important;
  font-family: var(--theme-location-expanded-title-font, var(--theme-pack-font-expanded-title)) !important;
  font-size: var(--theme-pack-expanded-title-size);
  font-weight: var(--theme-pack-font-expanded-title-weight);
  line-height: var(--theme-pack-expanded-title-line-height);
  text-shadow: var(--theme-pack-text-shadow);
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

html[data-theme-pack-visual] .expanded-text {
  color: var(--theme-location-ink, var(--theme-pack-ink)) !important;
  font-family: var(--theme-location-expanded-text-font, var(--theme-pack-font-expanded-text)) !important;
  font-size: var(--theme-pack-expanded-text-size);
  font-weight: var(--theme-pack-font-expanded-text-weight);
  line-height: var(--theme-pack-expanded-text-line-height);
  text-shadow: var(--theme-pack-text-shadow);
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Home is one compact welcome card, not a miniature document hierarchy.
   Keep its title, guidance, and theme action in one readable hand. */
html[data-theme-pack-visual] .tile-container[data-title="Home"] .expanded-title,
html[data-theme-pack-visual] .tile-container[data-title="Home"] .expanded-text,
html[data-theme-pack-visual] .tile-container[data-title="Home"] .home-theme-selector,
html[data-theme-pack-visual] .tile-container[data-title="Home"] .home-theme-action {
  font-family: var(--theme-location-expanded-text-font, var(--theme-pack-font-expanded-text)) !important;
}

html[data-theme-pack-visual] .expanded-open {
  color: var(--theme-pack-link) !important;
  background: var(--theme-pack-link-bg) !important;
  border-color: transparent !important;
  border-radius: var(--theme-pack-action-radius);
  font-family: var(--theme-pack-font-action) !important;
  font-size: var(--theme-pack-action-size);
  font-weight: var(--theme-pack-font-action-weight);
  letter-spacing: var(--theme-pack-action-letter-spacing);
  text-decoration-line: var(--theme-pack-action-text-decoration);
  text-decoration-style: var(--theme-pack-action-decoration-style);
  text-decoration-thickness: var(--theme-pack-action-decoration-thickness);
  text-underline-offset: var(--theme-pack-action-underline-offset);
  text-shadow: none;
  transform: var(--theme-pack-action-transform);
}

html[data-theme-pack-visual][data-theme-action-treatment="marker"] .expanded-open {
  align-items: center;
  background: var(--theme-pack-link-bg) !important;
  border: var(--theme-pack-action-border) !important;
  box-sizing: border-box;
  box-shadow: var(--theme-pack-action-shadow);
  display: inline-flex;
  justify-content: center;
  min-height: 38px;
  min-width: 96px;
  padding: var(--theme-pack-action-padding);
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}

html[data-theme-pack-visual][data-theme-action-treatment="marker"] .expanded-open::before {
  content: "";
  height: max(100%, 44px);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
}

html[data-theme-pack-visual][data-theme-action-treatment="marker"] .expanded-open:hover {
  filter: brightness(1.06);
}

html[data-theme-pack-visual] .tile-expanded > .paper-body {
  justify-content: var(--theme-pack-expanded-justify);
  gap: var(--theme-pack-expanded-gap);
}

html[data-theme-pack-visual] .tile-expanded .expanded-title {
  margin: 0;
}

html[data-theme-pack-visual] .tile-expanded .expanded-text {
  flex: 0 1 auto;
}

html[data-theme-pack-visual] .expanded-text br + br {
  display: none;
}

html[data-theme-pack-visual] .tile-expanded .expanded-open {
  margin: .25rem auto 0;
}

html[data-theme-pack-visual] .mini-window-container {
  top: var(--theme-pack-viewer-top);
  width: var(--theme-pack-viewer-width);
  height: var(--theme-pack-viewer-height);
  background: var(--theme-pack-viewer-bg);
  background-image: var(--theme-pack-viewer-bg-image);
  border-width: var(--theme-pack-viewer-border-width);
  border-style: var(--theme-pack-viewer-border-style);
  border-color: var(--theme-pack-viewer-border);
  border-radius: var(--theme-pack-viewer-radius);
  box-shadow: var(--theme-pack-viewer-shadow);
  padding: var(--theme-pack-viewer-padding);
  transform: translateX(-50%) rotate(var(--theme-pack-viewer-rotation));
}

html[data-theme-pack-visual] .mini-window {
  border-radius: var(--theme-pack-viewer-iframe-radius);
}

.theme-viewer-decoration {
  display: none;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

html[data-theme-pack-visual][data-viewer-artifact]:not([data-viewer-artifact="none"])
  .theme-viewer-decoration {
  display: block;
}

.theme-viewer-label,
.theme-viewer-hardware,
.theme-viewer-hardware::before,
.theme-viewer-hardware::after {
  box-sizing: border-box;
  pointer-events: none;
  position: absolute;
}

.theme-viewer-label {
  color: var(--theme-pack-viewer-artifact-ink);
}

/* Stable, pack-selected artifact recipes. Packs own their colors, surface,
   label, frame geometry, and document material through presentation data. */
html[data-viewer-artifact="field-notebook"] .theme-viewer-hardware {
  background: repeating-radial-gradient(
    circle at 18px 22px,
    var(--theme-pack-viewer-artifact-detail) 0 5px,
    var(--theme-pack-viewer-artifact-accent) 5.5px 7px,
    transparent 7.5px 56px
  );
  bottom: 8px;
  left: 0;
  top: 8px;
  width: 36px;
}

html[data-viewer-artifact="field-notebook"] .theme-viewer-label {
  background: var(--theme-pack-viewer-artifact-accent);
  border-radius: 2px 12px 2px 9px;
  bottom: 10px;
  font: 700 11px/1 var(--theme-pack-control-font);
  left: 54px;
  letter-spacing: .08em;
  padding: 6px 12px 5px;
}

html[data-viewer-artifact="expedition-log"] .theme-viewer-hardware {
  background:
    linear-gradient(135deg, var(--theme-pack-viewer-artifact-accent) 0 27px, transparent 28px) left top / 42px 42px no-repeat,
    linear-gradient(225deg, var(--theme-pack-viewer-artifact-accent) 0 27px, transparent 28px) right top / 42px 42px no-repeat,
    linear-gradient(45deg, var(--theme-pack-viewer-artifact-accent) 0 27px, transparent 28px) left bottom / 42px 42px no-repeat,
    linear-gradient(315deg, var(--theme-pack-viewer-artifact-accent) 0 27px, transparent 28px) right bottom / 42px 42px no-repeat;
  inset: 0;
}

html[data-viewer-artifact="expedition-log"] .theme-viewer-label {
  background: var(--theme-pack-viewer-artifact-accent);
  border: 1px solid var(--theme-pack-viewer-artifact-detail);
  border-radius: 3px;
  bottom: 10px;
  font: 700 10px/1 ui-monospace, monospace;
  left: 48px;
  letter-spacing: .11em;
  padding: 6px 12px;
  white-space: nowrap;
}

html[data-viewer-artifact="observation-window"] .theme-viewer-hardware {
  border: 1px solid var(--theme-pack-viewer-artifact-detail);
  border-radius: 40px;
  box-shadow: inset 0 0 22px rgba(255,255,255,.1);
  inset: 10px;
}

html[data-viewer-artifact="observation-window"] .theme-viewer-hardware::before {
  background: linear-gradient(126deg,
    transparent 10%, rgba(255,255,255,.04) 26%,
    rgba(255,255,255,.16) 29%, rgba(255,255,255,.03) 35%, transparent 52%);
  border-radius: 30px;
  content: "";
  inset: 14px;
}

html[data-viewer-artifact="observation-window"] .theme-viewer-hardware::after {
  background: var(--theme-pack-focus);
  border: 2px solid var(--theme-pack-viewer-artifact-accent);
  border-radius: 50%;
  bottom: 0;
  box-shadow: 0 0 8px var(--theme-pack-focus);
  content: "";
  height: 8px;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 8px;
}

html[data-viewer-artifact="observation-window"] .theme-viewer-label {
  background: var(--theme-pack-control-bg);
  border: 1px solid var(--theme-pack-viewer-border);
  border-radius: 999px;
  bottom: -4px;
  font: 700 9px/1 ui-monospace, monospace;
  left: 34px;
  letter-spacing: .14em;
  padding: 5px 12px;
  white-space: nowrap;
}

html[data-theme-pack-visual] .mini-window-container::before,
html[data-theme-pack-visual] .mini-window-container::after {
  display: var(--theme-pack-viewer-decoration-display);
  width: var(--theme-pack-viewer-decoration-width);
  height: var(--theme-pack-viewer-decoration-height);
  background: var(--theme-pack-viewer-decoration-bg);
  border: var(--theme-pack-viewer-decoration-border);
  box-shadow: var(--theme-pack-viewer-decoration-shadow);
  top: var(--theme-pack-viewer-decoration-top);
}

html[data-theme-pack-visual] .mini-window-container::before {
  left: var(--theme-pack-viewer-decoration-before-left);
  transform: var(--theme-pack-viewer-decoration-before-transform);
}

html[data-theme-pack-visual] .mini-window-container::after {
  right: var(--theme-pack-viewer-decoration-after-right);
  transform: var(--theme-pack-viewer-decoration-after-transform);
}

html[data-theme-pack-visual] .mini-window-container.open {
  animation-duration: var(--theme-pack-viewer-enter-duration);
}

html[data-theme-pack-visual] .mini-window-container.closing {
  animation-duration: var(--theme-pack-viewer-exit-duration);
}

@media (max-width: 700px) {
  html[data-theme-pack-visual] .mini-window-container {
    top: var(--theme-pack-phone-viewer-top);
    width: var(--theme-pack-phone-viewer-width);
    height: var(--theme-pack-phone-viewer-height);
    padding: var(--theme-pack-phone-viewer-padding);
  }

  html[data-theme-pack-visual] .mini-window {
    border-radius: var(--theme-pack-phone-viewer-iframe-radius);
  }

  .theme-viewer-label {
    font-size: 8px !important;
    letter-spacing: .06em !important;
  }

  html[data-viewer-artifact="observation-window"] .theme-viewer-hardware {
    border-radius: 22px;
  }
}

html[data-theme-pack-visual] .tile-container.expanded .tile-expanded {
  animation-duration: var(--theme-motion-enter-duration, var(--theme-pack-cover-enter-duration));
}

html[data-theme-pack-visual] .tile-container.cover-leaving-up .tile-expanded,
html[data-theme-pack-visual] .tile-container.cover-leaving-down .tile-expanded {
  animation-duration: var(--theme-motion-exit-duration, var(--theme-pack-cover-exit-duration));
}

html[data-theme-pack-visual] [data-theme-detail] {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(var(--theme-detail-rotation, 0deg));
}

html[data-theme-pack-visual] .navbar {
  transform: rotate(var(--theme-pack-nav-rotation));
  border-width: var(--theme-pack-nav-border-width);
  border-style: var(--theme-pack-nav-border-style);
  border-color: var(--theme-pack-nav-border);
  border-radius: var(--theme-pack-nav-radius);
  color: var(--theme-pack-nav-ink);
  background: var(--theme-pack-nav-bg);
  box-shadow: var(--theme-pack-nav-shadow);
  padding: var(--theme-pack-nav-padding);
}

html[data-theme-pack-visual] .navbar-content {
  gap: var(--theme-pack-nav-gap);
}

html[data-theme-pack-visual] .navbar-title {
  color: var(--theme-pack-nav-ink);
  font-family: var(--theme-pack-font-navbar);
  font-weight: var(--theme-pack-font-navbar-weight);
}

html[data-theme-pack-visual] .navbar-title {
  display: var(--theme-pack-nav-title-display);
  font-size: var(--theme-pack-font-navbar-size);
}

html[data-theme-pack-visual] .navbar-logo {
  display: var(--theme-pack-nav-logo-display);
  width: var(--theme-pack-nav-logo-size);
  height: var(--theme-pack-nav-logo-size);
  border: var(--theme-pack-nav-logo-border);
  border-radius: var(--theme-pack-nav-logo-radius);
  filter: var(--theme-pack-nav-logo-filter);
}

html[data-theme-pack-visual] .home-button,
html[data-theme-pack-visual] .close-button {
  color: var(--theme-pack-control-ink);
  background: var(--theme-pack-control-bg);
  border-width: var(--theme-pack-control-border-width);
  border-style: var(--theme-pack-control-border-style);
  border-color: var(--theme-pack-control-border);
  border-radius: var(--theme-pack-control-radius);
  box-shadow: var(--theme-pack-control-shadow);
  font-family: var(--theme-pack-control-font);
  font-size: var(--theme-pack-font-control-size);
}

html[data-theme-pack-visual] .home-button img {
  filter: var(--theme-pack-control-icon-filter);
}

html[data-theme-pack-visual] .home-button:hover,
html[data-theme-pack-visual] .close-button:hover {
  background: var(--theme-pack-control-hover-bg);
  box-shadow: var(--theme-pack-control-hover-shadow);
}

html[data-theme-pack-visual] .loading-scrap {
  display: var(--theme-pack-loading-display);
  position: absolute;
  top: 40px;
  left: 50%;
  transform: var(--theme-pack-loading-transform);
  z-index: 10;
  pointer-events: none;
  padding: var(--theme-pack-loading-padding);
  color: var(--theme-pack-loading-ink);
  background: var(--theme-pack-loading-bg);
  border-radius: var(--theme-pack-loading-radius);
  box-shadow: var(--theme-pack-loading-shadow);
  font: var(--theme-pack-loading-size) var(--theme-pack-loading-font);
}

html[data-theme-pack-visual] .close-button .tab {
  transform: none;
}

html[data-theme-pack-visual] .tile-base {
  transition-duration: var(--theme-pack-tile-transition-duration);
}

html[data-theme-pack-visual] .home-button:focus-visible,
html[data-theme-pack-visual] .close-button:focus-visible,
html[data-theme-pack-visual] .expanded-title:focus-visible,
html[data-theme-pack-visual] .expanded-open:focus-visible {
  outline-color: var(--theme-pack-focus);
}

html[data-theme-pack-visual] .tile-base:focus-visible {
  outline: none;
}

html[data-theme-pack-visual] .tile-base:focus-visible .theme-object {
  filter:
    drop-shadow(0 0 2px var(--theme-pack-focus))
    drop-shadow(0 0 6px var(--theme-pack-focus));
}

@media (max-width: 600px) {
  .navbar { max-width: calc(100vw - 20px); left: 10px; top: 10px; }
  .navbar-title { max-width: 22vw; }
  .tile-expanded .home-theme-selector {
    font-size: max(.84rem, calc(var(--theme-pack-action-size) * .88));
  }
  .home-theme-question {
    font-size: var(--theme-pack-phone-expanded-text-size);
  }
  .home-theme-action {
    min-height: 32px;
    padding: .18rem .48rem;
  }
  html[data-theme-pack-visual] .tile-container,
  html[data-theme-pack-visual] .tile-container.expanded,
  html[data-theme-pack-visual] .tile-container.connected,
  html[data-theme-pack-visual] .tile-container.dimmed,
  html[data-theme-pack-visual] .tile-container:hover,
  html[data-theme-pack-visual] .tile-container.expanded:hover {
    width: var(--theme-pack-phone-tile-size);
    height: var(--theme-pack-phone-tile-size);
  }
  html[data-theme-pack-visual] .tile-expanded,
  html[data-theme-pack-visual] .tile-container.sticky .tile-expanded,
  html[data-theme-pack-visual] .tile-container.scrap .tile-expanded {
    width: var(--theme-location-phone-expanded-width, var(--theme-pack-phone-expanded-width));
    min-height: var(--theme-location-phone-expanded-min-height, var(--theme-pack-phone-expanded-min-height));
  }
  html[data-theme-pack-visual] .tile-expanded .expanded-text {
    font-size: var(--theme-pack-phone-expanded-text-size);
    line-height: 1.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-object,
  .theme-ambient { animation: none !important; transition: none !important; }
}