/* Final brand boundary: the supplied mark must never escape its app-icon container. */
.brand-mark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.brand-mark img {
  position: static !important;
  display: block;
  width: 26px !important;
  height: 26px !important;
  max-width: 26px;
  max-height: 26px;
  object-fit: contain;
  object-position: center;
  flex: 0 0 26px;
}

.selection-message {
  color: var(--sage-deep);
  font-weight: 600;
}

.mood-next {
  border: 1px solid rgba(85, 114, 99, .18);
  background: #c8d8cc;
  color: var(--ink);
  box-shadow: 0 5px 14px rgba(85, 114, 99, .10);
  transition: background .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
  font-weight: 600;
}

.mood-next:not(:disabled):hover {
  background: #b9cfbf;
  box-shadow: 0 8px 20px rgba(85, 114, 99, .14);
  transform: translateY(-1px);
}

.mood-next:focus-visible { outline-color: rgba(85, 114, 99, .5); }

@media (min-width: 800px) {
  .desktop-aside > .brand {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.025em;
  }
}

/* App-style navigation stays touch-first through tablet portrait. */
.bottom-nav {
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: calc(70px + env(safe-area-inset-bottom));
  padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
  transform: none;
  border: 0;
  border-top: 1px solid rgba(36, 49, 46, .09);
  border-radius: 0;
  background: rgba(246, 243, 238, .97);
  box-shadow: 0 -7px 22px rgba(49, 60, 55, .07);
  backdrop-filter: none;
}

@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  .app-shell {
    max-width: 920px;
    padding-right: 28px;
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
    padding-left: 28px;
  }
}

@media (min-width: 800px) and (max-width: 1024px) and (orientation: portrait) {
  .app-shell {
    display: block;
    grid-template-columns: none;
    gap: 0;
    padding-top: 28px;
  }

  .desktop-aside { display: none; }
  .topbar { justify-content: space-between; }
  .topbar .brand { display: flex; }
  .bottom-nav { display: grid; }
}