/* ==========================================================================
   Suite navigation rail — the .su-rail from emeraldsuite.html, reused inside
   each app's welcome screen so Notes/Docs/Slides/Sheets can jump straight to
   another app without going back through the suite home first.

   Every rule is scoped under .welcome-screen > .su-rail so it can never affect
   the editor UI, which only differs from the welcome screen by that screen
   being hidden. Load it AFTER the app's own stylesheet.
   ========================================================================== */

.welcome-screen > .su-rail {
    /* relative, not static: the ::after shadow below is absolutely positioned
       and would otherwise anchor to .welcome-screen, putting it on the far
       edge of the screen instead of the rail's right edge. */
    position: relative;
    flex: none;
    align-self: stretch;
    width: 68px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 0;
    background: #f5f5f5;
}

/* Right-edge shadow cast by the welcome content onto the rail. Same gradient
   layer as the suite home rail — box-shadow has a hard rectangular end that
   shows as a cut at the top, where the rail meets the navbar. */
.welcome-screen > .su-rail::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 9px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(15, 22, 17, .035), rgba(15, 22, 17, 0));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 6px, rgba(0, 0, 0, .35) 14px, #000 22px);
    mask-image: linear-gradient(to bottom, transparent 0, transparent 6px, rgba(0, 0, 0, .35) 14px, #000 22px);
}

.welcome-screen > .su-rail .rail-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    padding: 10px 0;
    border-radius: 8px;
    text-decoration: none;
    color: #605e5c;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

.welcome-screen > .su-rail .rail-item span {
    display: none;
}

.welcome-screen > .su-rail .rail-item:hover {
    background: #f3f2f1;
    color: #201f1e;
}

/* Accent is per-app (notes/docs/slides/sheets each define --ui-accent on
   :root), so the active pill picks up the current app's colour. */
.welcome-screen > .su-rail .rail-item.active {
    color: var(--ui-accent, #239a4d);
}

.welcome-screen > .su-rail .rail-item.active::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 4px;
    background: var(--ui-accent, #239a4d);
}

/* Keep the rail icons square. style.css .logo .icon-primary stretches images,
   and the generic img rules in some app sheetsheets do the same. */
.welcome-screen > .su-rail .rail-item img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.welcome-screen > .su-rail .rail-item svg {
    width: 26px;
    height: 26px;
}

/* The welcome screens centre their content with justify-content: center, which
   would centre the rail + content pair as one block and leave a gap to the left
   of the rail. Pin the rail to the left edge and re-centre the content inside
   the space that is left. */
.welcome-screen:has(> .su-rail) {
    justify-content: flex-start;
}

.welcome-screen:has(> .su-rail) > .welcome-content {
    flex: 1 1 auto;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    .welcome-screen > .su-rail {
        width: 56px;
    }

    .welcome-screen > .su-rail .rail-item {
        width: 48px;
    }

    .welcome-screen > .su-rail .rail-item span {
        font-size: 9.5px;
    }
}

@media (max-width: 640px) {
    .welcome-screen > .su-rail {
        display: none;
    }
}