
.wk-route {
    width: 100%;
    height: 100%;
    --wk-height-route-header: 56px;
}

.wk-route-header {
    width: 100%;
    height: var(--wk-height-route-header);
    padding: 0.5rem 0.8125rem;
    display: flex;
    align-items: center;
    background-color: var(--wk-color-secondary);
}

.wk-route-box {
    width: 100%;
    height: calc(100% - var(--wk-height-route-header));
    position: relative;
}

.wk-route-content {
    width: 100%;
    height: 100%;
    background-color: var(--wk-color-secondary);
    position: relative;
    /* opacity: 1; */
    /* transition: opacity 150ms ease-in 0s; */
}

.wk-route-content-route {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: translate3d(100vw, 0, 0);
    transition: transform var(--wk-layer-transition);
}

.wk-route-content-next {
   width: 100%;
   height: 100%;
   background-color: var(--wk-color-secondary);
   overflow: auto;
   /* transition: opacity 350ms ease-in 0s; */
}

.wk-route-header-close {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
}

.wk-route-header-close:hover {
    background-color: rgb(112,117,121,0.08);
}

.wk-route-header-close-icon {
    position: absolute;
    transform: rotate(-45deg);
}

.wk-route-header-close-icon,.wk-route-header-close-icon::before,.wk-route-header-close-icon::after {
    width: 1.125rem;
    height: 0.125rem;
    border-radius: 0.125rem;
    background-color: rgb(112,117,121);
    transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.wk-route-header-close-icon::before {
    transform: rotate(90deg);
}

.wk-route-header-close-icon::before ,.wk-route-header-close-icon::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
}


.wk-state-back {
    transform: rotate(180deg);
}

.wk-state-back::before {
    transform: rotate(45deg) scaleX(0.75) translate(0, -0.375rem);
}

.wk-state-back::after {
    transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}




.wk-route-header-title-box {
    color: #999;
   display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    flex: 1;
}

.wk-route-header-title-box-open {

}

.wk-route-header-title {
    font-size: 18px;
    font-weight: 500;
    margin-left: 1.375rem;
    color: black;
}

body[theme-mode=dark]  .wk-route-header-title {
    color: white;
}


.wk-route-header-title-box-open .wk-route-header-title{
    display: none;
}

.wk-route-header-title-next {
    font-size: 18px;
    font-weight: 500;
    margin-left: 1.375rem;
    color: black;
    position: absolute;
    opacity: 0;
    transform: translate3d(100vw, 0, 0);
    transition: transform var(--wk-layer-transition),opacity 500ms ease-in 0s;
    width: 180px;

}

body[theme-mode=dark] .wk-route-header-title-next {
    color: white;
}

.wk-route-header-title-box-open .wk-route-header-title-next {
    transform: translate3d(0, 0, 0);
    opacity:1;
}

.wk-route-content-route-open .wk-route-content {
    /* opacity: 0; */
}

.wk-route-content-route-open .wk-route-content-route {
    transform: translate3d(0, 0, 0);
}

.wk-route-content-route-open .wk-route-content-next {
    /* opacity: 1; */
}


.wk-route-header-right-view {
    opacity: 0;
    transition: opacity 500ms ease-out;
}

.wk-route-header-right-view-open {
    opacity: 1;
}

/*
 * YUJ-1444 (2026-05-20) / YUJ-1447 (R3) — Defensive net for "duplicate back
 * arrow" P1, scoped to nested RoutePage only.
 *
 * Architectural rule: at most ONE RoutePage in any ancestor chain. Pushed
 * subviews should never wrap themselves in another RoutePage — they should
 * accept the parent's RouteContext (via prop) and push their own children
 * onto that shared stack. PersonaSettings, PersonaEdit etc. follow this rule.
 *
 * However, if a nested RoutePage slips in (third-party module, regression,
 * or stale build with the pre-PR #69 PersonaSettings code), the user sees
 * two stacked headers and two ← buttons. That's unfixable from the parent's
 * side without modifying every offending child.
 *
 * This rule is the last line of defense: if a RoutePage is rendered inside
 * ANOTHER RoutePage's view queue, its own header is hidden and the body
 * slides up to fill the space. The outer RoutePage retains its own header
 * and back arrow, so the user sees exactly one ← per pushed subview.
 *
 * Scoping (R3 fix — YUJ-1447):
 *   The selector REQUIRES an outer `.wk-route` ancestor before the
 *   `.wk-viewqueue-view`. This is critical because `WKLayout` also wraps
 *   normal app content in `WKViewQueue` (i.e. a top-level `.wk-viewqueue-view`
 *   without any enclosing `.wk-route`). Top-level RoutePages such as
 *   `ChannelSetting`, `MeInfo`, `UserInfo` etc. live there and MUST keep
 *   their headers. The earlier rule `.wk-viewqueue-view .wk-route ...` was
 *   too broad and hid those headers globally — see PR #70 review.
 *
 *   With the `.wk-route` ancestor required, the rule only fires for a
 *   RoutePage that is literally nested inside another RoutePage's queue
 *   (e.g. `MeInfo` (RoutePage) pushes `PersonaSettings` which still renders
 *   its own RoutePage in standalone/test mode). Only the outermost
 *   RoutePage owns the header.
 *
 * If a future caller intentionally needs a nested RoutePage with its own
 * header (rare; usually wrong), opt out by adding `.wk-route-keep-header`
 * to the wk-route div via CSS modules / customRender of RoutePage.
 */
.wk-route .wk-viewqueue-view .wk-route:not(.wk-route-keep-header) > .wk-route-header {
    display: none;
}

.wk-route .wk-viewqueue-view .wk-route:not(.wk-route-keep-header) > .wk-route-box {
    /* Header is gone; let the body fill the full vertical space. */
    height: 100%;
}



