/*
 * THE NAVIGATION RAIL. Shared by every layout that has one.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS IS A FILE AND NOT INLINE IN A LAYOUT
 * ---------------------------------------------------------------------------
 *
 * It used to live in a <style> block in layouts/app.blade.php, which was fine
 * while one layout had a rail. On 07/09/2026 the team view needed one too, and
 * the choice was to copy 80 lines of CSS into a second layout or to share them.
 *
 * Copying is how the two drift. The same project had "Demand Flow" hardcoded in
 * two places in one layout and they were already inconsistent by the time
 * anybody looked, so this is one source of truth instead.
 *
 * ---------------------------------------------------------------------------
 * WHAT THIS FILE DOES NOT OWN
 * ---------------------------------------------------------------------------
 *
 * The CONTENT OFFSET. The rail is fixed-position, so each layout has to reserve
 * space for it on its own container: `.product` in the app layout, `.wrap` and
 * the header in the team layout. Those differ per layout and belong with the
 * layout, not here.
 *
 * ---------------------------------------------------------------------------
 * COLOURS COME FROM THE HOST LAYOUT, WITH FALLBACKS
 * ---------------------------------------------------------------------------
 *
 * The app layout defines --dark, --paper, --apple, --line. The team layout
 * calls the same colours --green, --paper, --ahead, --hair. Rather than force
 * one layout to rename its own visual system, every colour below has a fallback
 * to the literal brand value, so the rail renders correctly even in a layout
 * that defines none of them.
 */

:root {
    --rail: 248px;
    --rail-rest: 56px;
}

/*
 * IT OVERLAYS RATHER THAN PUSHES. Ed's ask was hover, pull out, pick a
 * dashboard. Widening a fixed element in the flow of the layout reflows the
 * whole page under the cursor, which is exactly the jumpiness that makes a
 * hover menu feel broken.
 */
.rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--rail-rest);
    overflow: hidden;
    background: var(--dark, #34401A);
    color: var(--paper, #F8F4F0);
    display: flex;
    flex-direction: column;
    padding: 16px 0 14px;
    z-index: 40;
    transition: width .2s cubic-bezier(.22, .61, .36, 1);
}

/* Hover only where there IS a hover. On touch this rule never applies and the
   drawer button below is the way in. */
@media (hover: hover) and (pointer: fine) {
    .rail:hover,
    .rail:focus-within { width: var(--rail); box-shadow: 4px 0 16px rgba(47,41,46,.18); }
}
body.rail-pinned .rail { width: var(--rail); }
body.rail-open .rail { width: var(--rail); box-shadow: 4px 0 16px rgba(47,41,46,.18); }

.rail-head { display: flex; align-items: center; gap: 8px; padding: 0 14px 16px; min-height: 30px; }
.rail-head img { width: 128px; height: auto; display: block; }
.rail-mark {
    /* The collapsed state needs a mark, and the brand forbids typesetting the
       logo, so it is a plain block in Apple. */
    flex: 0 0 12px; width: 12px; height: 12px; background: var(--apple, #A0CD4F);
}
.rail-label {
    font-size: 10px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(248,244,240,.55);
    padding: 10px 16px 4px; white-space: nowrap;
}
.rail-product {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px; font-size: 13.5px; font-weight: 700;
    color: var(--paper, #F8F4F0); text-decoration: none; white-space: nowrap;
}
.rail a.rail-view {
    display: block; padding: 7px 16px 7px 38px;
    font-size: 13px; text-decoration: none; white-space: nowrap;
    color: rgba(248,244,240,.78);
    border-left: 3px solid transparent;
}
.rail a.rail-view:hover { background: rgba(248,244,240,.08); color: var(--paper, #F8F4F0); }
.rail a.rail-view[aria-current="page"] {
    background: rgba(248,244,240,.13); color: var(--paper, #F8F4F0);
    border-left-color: var(--apple, #A0CD4F); font-weight: 700;
}

/* Everything that is words disappears at rest, so the collapsed rail is a quiet
   strip rather than a column of clipped text. */
.rail .rail-text { opacity: 0; transition: opacity .12s linear; }
@media (hover: hover) and (pointer: fine) {
    .rail:hover .rail-text, .rail:focus-within .rail-text { opacity: 1; }
}
body.rail-pinned .rail .rail-text,
body.rail-open .rail .rail-text { opacity: 1; }

.rail-foot { margin-top: auto; padding: 0 16px; }
.rail-foot button, .rail-pin {
    background: none; border: 1px solid rgba(248,244,240,.3);
    color: var(--paper, #F8F4F0); padding: 5px 10px; cursor: pointer;
    font: inherit; font-size: 12px; white-space: nowrap;
}

/* The drawer button. Hidden where hover works, shown where it does not. */
.rail-drawer-btn {
    display: none;
    position: fixed; top: 10px; left: 10px; z-index: 50;
    background: var(--dark, #34401A); color: var(--paper, #F8F4F0);
    border: 1px solid rgba(248,244,240,.3);
    width: 36px; height: 36px; cursor: pointer; font-size: 15px; line-height: 1;
}
.rail-scrim { display: none; }
body.rail-open .rail-scrim {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(47,41,46,.4);
}

@media (hover: none), (pointer: coarse), (max-width: 760px) {
    /* No hover here, so the rail cannot be a hover menu. It rests off screen
       and the button opens it. */
    .rail-drawer-btn { display: block; }
    .rail { width: var(--rail); transform: translateX(-100%); transition: transform .2s cubic-bezier(.22,.61,.36,1); }
    body.rail-open .rail { transform: translateX(0); }
    .rail .rail-text { opacity: 1; }
    .rail-pin { display: none; }
}