@import url("/clear-room.css?v=20260902a");

:root {
  --clear-titlebar-height: 40px;
  --clear-footer-height: 38px;
}

.room {
  position: fixed;
  inset: var(--clear-titlebar-height) 0 var(--clear-footer-height);
  width: 100%;
  height: auto;
}

.room__scene {
  width: 100%;
  height: 100%;
  /* Fill the available scene without changing the artwork's proportions. */
  background-size: cover;
}

.room__thorium {
  top: calc(var(--clear-titlebar-height) + 10px);
}

.room__continuarium {
  bottom: calc(var(--clear-footer-height) + clamp(4px, 0.55vw, 9px));
}

.room-status {
  bottom: calc(var(--clear-footer-height) + 8px);
}

.room-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147481000;
  display: flex;
  align-items: center;
  height: var(--clear-footer-height);
  padding: 3px 16px;
  border-top: 1px solid var(--footer-rule);
  color: var(--footer-ink);
  background: var(--footer-bg);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.room-footer__legal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.room-footer__links {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--footer-rule);
}

.room-footer__links a {
  color: inherit;
  font: 650 8px/1 ui-monospace, Consolas, monospace;
  letter-spacing: 0.08em;
  opacity: 0.62;
  text-decoration: none;
  text-transform: uppercase;
}

.room-footer__links a:hover,
.room-footer__links a:focus-visible {
  color: var(--footer-active);
  opacity: 1;
  outline: 0;
}

.room-footer__legal img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px var(--footer-shadow));
}

.room-footer__legal span {
  overflow: hidden;
  font: 600 clamp(8px, 0.58vw, 11px)/1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.room-footer__legal:hover,
.room-footer__legal:focus-visible {
  color: var(--footer-active);
  outline: 0;
}

body[data-room="darkroom"] {
  --clear-titlebar-bg: var(--footer-bg);
  --clear-titlebar-ink: var(--footer-ink);
  --clear-titlebar-rule: var(--footer-rule);
  --clear-titlebar-shadow: var(--footer-shadow);
  --clr-tb-icon-shadow: rgba(0, 0, 0, 0.9);
  --clear-titlebar-wordmark: #bba780;
  --clear-titlebar-icon: #9f8c6b;
  --clear-pages-ink: #9f8c6b;
  --clear-pages-rule: rgba(231, 238, 240, 0.42);
  --clear-pages-active: #5ed9ff;
  --clear-address-bg: rgba(3, 10, 17, 0.98);
  --clear-address-ink: #eaf6f8;
  --clear-address-rule: rgba(94, 217, 255, 0.3);
  --footer-bg: #02070c;
  --footer-rule: rgba(94, 217, 255, 0.17);
  --footer-ink: #bba780;
  --footer-active: #e7c66e;
  --footer-shadow: rgba(0, 0, 0, 0.8);
}

body[data-room="lightroom"] {
  --clear-titlebar-bg: var(--footer-bg);
  --clear-titlebar-ink: var(--footer-ink);
  --clear-titlebar-rule: var(--footer-rule);
  --clear-titlebar-shadow: var(--footer-shadow);
  --clr-tb-icon-shadow: rgba(0, 0, 0, 0.92);
  --clear-titlebar-wordmark: #76572e;
  --clear-titlebar-icon: #5d4322;
  --clear-pages-ink: #5d4322;
  --clear-pages-rule: rgba(73, 60, 44, 0.46);
  --clear-pages-active: #087d8f;
  --clear-address-bg: #0a151e;
  --clear-address-ink: #edf6f7;
  --clear-address-rule: rgba(216, 181, 106, 0.34);
  --footer-bg: #eee8dc;
  --footer-rule: rgba(152, 112, 49, 0.25);
  --footer-ink: #76572e;
  --footer-active: #007e91;
  --footer-shadow: rgba(95, 70, 30, 0.28);
}

@media (max-width: 620px), (orientation: portrait) and (max-width: 820px) {
  .room__scene {
    background-size: auto 100%;
    /* The approved light and dark artworks place their architectural axes at
       slightly different source coordinates. These measured focal positions
       put each beam on the portrait viewport's exact horizontal center. */
    background-position: 78% center;
  }

  body[data-room="lightroom"] .room__scene { background-position: 79% center; }
  body[data-room="darkroom"] .room__scene { background-position: 78% center; }

  /* The baked desktop wordmark cannot survive a portrait crop. Re-use the
     governed transparent lettering instead of synthesizing a substitute font. */
  .room__scene::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 24%;
    left: 50%;
    transform: translateX(-50%);
    width: min(78vw, 420px);
    aspect-ratio: 1600 / 360;
    background: center / contain no-repeat url("/wordart/clear-approved-title.png");
    opacity: 1;
    filter: contrast(1.16) saturate(1.08) brightness(1.03)
      drop-shadow(0 2px 3px rgba(0, 0, 0, .72))
      drop-shadow(0 0 8px rgba(231, 198, 110, .16));
    pointer-events: none;
  }

  body[data-room="lightroom"] .room__scene::before {
    filter: contrast(1.35) saturate(1.12) brightness(.72)
      drop-shadow(0 2px 2px rgba(58, 38, 8, .82))
      drop-shadow(0 0 1px rgba(255, 244, 200, .42));
  }

  .room__ethos {
    top: 36%;
    left: 4%;
    width: 92%;
    text-align: center;
  }

  .room__search {
    top: 43%;
    left: 4%;
    width: 92%;
    max-width: 92%;
  }

  .search-strip {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) repeat(3, 34px) !important;
    overflow: hidden;
  }

  .claire {
    width: 100%;
    max-width: 100%;
    font-size: 10px;
    line-height: 1.35;
  }

  .room__tm { display: none; }

  .room-footer__legal span {
    letter-spacing: 0.05em;
  }
}