/* LUB Shakthi — the desktop shell for the member side.
 *
 * Everything is prefixed `pane-`, not `rail-`. The first version used
 * `.rail-nav`, which feed.css had already claimed for the media carousel's
 * arrows — a 36px absolutely-positioned circle — and the whole left-hand
 * navigation rendered as one small round button. A shared stylesheet with
 * generic names is a shared namespace whether or not anybody meant it to be.
 */

.mshell { display: block; }

/* ───────────────────────────────────────── the three columns */

@media (min-width: 1100px) {
    .mshell.has-rails {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr) 312px;
        gap: 20px;
        align-items: start;
        max-width: 1420px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .mshell.has-rails .mwrap {
        max-width: none; margin: 0; padding-left: 0; padding-right: 0;
    }

    /* The rails scroll with the page until they run out, then hold. A rail
       that scrolls away is a rail nobody uses. */
    .pane {
        position: sticky;
        top: calc(var(--mtop-h, 62px) + var(--mtabs-h, 50px) + 14px);
        max-height: calc(100vh - var(--mtop-h, 62px) - var(--mtabs-h, 50px) - 28px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 24px;
    }

    .pane::-webkit-scrollbar { width: 8px; }
    .pane::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
    .pane:hover::-webkit-scrollbar-thumb { background: rgba(17,24,39,.16); }
}

/* Room for one rail but not two. The right wins: what is waiting on you
   beats a list of links already in the tab bar. */
@media (min-width: 900px) and (max-width: 1099px) {
    .mshell.has-rails {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 18px; max-width: 1100px; margin: 0 auto; padding: 0 16px;
    }
    .mshell.has-rails .mwrap { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
    .pane-left { display: none; }
    .pane-right {
        position: sticky;
        top: calc(var(--mtop-h, 62px) + var(--mtabs-h, 50px) + 14px);
        max-height: calc(100vh - var(--mtop-h, 62px) - var(--mtabs-h, 50px) - 28px);
        overflow-y: auto;
    }
}

@media (max-width: 899px) { .pane { display: none; } }

/* ───────────────────────────────────────── pages that are not a column
 *
 * The reading column is 760px wide, which is right for a feed and wrong for
 * everything shaped like an application. The chat was the clearest case: a
 * two-pane messenger squeezed into that column left two thirds of a desktop
 * window empty and the thread itself barely wider than a phone.
 *
 * `is-solo` is still a page, just a wide one. `is-full` fills the window.
 */
/* `is-full` holds at every width — a chat squeezed into a padded column on a
   phone is the same mistake in miniature. */
.mshell.is-full > .mwrap { max-width: none; width: 100%; padding: 0; }

@media (min-width: 900px) {
    .mshell.is-solo > .mwrap { max-width: 1240px; }
}

/* ───────────────────────────────────────── shared furniture */

.pane-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 14px; margin-bottom: 12px;
}
.pane-card h3 {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 9px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.pane-card h3 .material-symbols-outlined { font-size: 16px; }

.pane-card.is-urgent { border-color: #FEDF89; background: #FFFCF5; }
.pane-card.is-urgent h3 { color: #B54708; }
.pane-card.is-prompt { border-color: var(--brand-200); background: var(--brand-50); }
.pane-card.is-prompt h3 { color: var(--brand-deep); }

.pane-note { margin: -3px 0 9px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }

.pane-row {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 0; color: inherit; font-size: 13px;
    border-bottom: 1px solid var(--line);
}
.pane-row:last-of-type { border-bottom: 0; }
.pane-row:not(.is-plain):hover { color: var(--brand-deep); }
.pane-row .grow { min-width: 0; line-height: 1.35; }
.pane-row small {
    display: block; font-size: 11px; color: var(--ink-3); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pane-row > .material-symbols-outlined { font-size: 17px; color: var(--ink-3); flex: none; }
.pane-row .chip { flex: none; font-size: 10.5px; }
.pane-row .avatar { width: 30px; height: 30px; font-size: 11px; flex: none; }

.pane-all {
    display: block; text-align: center;
    margin-top: 9px; padding-top: 9px;
    border-top: 1px solid var(--line);
    font-size: 12.5px; font-weight: 600; color: var(--brand-deep);
}
.pane-all:hover { text-decoration: underline; }

.pane-badge {
    flex: none; background: var(--brand); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 1;
    border-radius: 999px; padding: 3px 7px; min-width: 19px; text-align: center;
}

.pane-grp {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--brand-100); color: var(--brand);
}
.pane-grp .material-symbols-outlined { font-size: 16px; }

.pane-date {
    width: 36px; flex: none; text-align: center;
    background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 3px 0;
}
.pane-date strong { display: block; font-size: 14px; color: var(--brand-deep); line-height: 1.1; }
.pane-date small { display: block; font-size: 9.5px; text-transform: uppercase; color: var(--ink-3); }

.pane-icon {
    width: 28px; height: 28px; flex: none;
    border: 0; border-radius: 50%; cursor: pointer;
    background: var(--bg); color: var(--ink-2);
    display: grid; place-items: center;
}
.pane-icon:hover { background: var(--brand-50); color: var(--brand-deep); }
.pane-icon .material-symbols-outlined { font-size: 15px; }

/* ───────────────────────────────────────── the left rail */

/* The one row in the rail that is about the member rather than about the
   application, with a strip of the association's colour across the top so it
   reads as a card of theirs and not as another link. */
.pane-me {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 10px;
    padding: 16px 11px 11px; margin-bottom: 12px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    color: inherit; transition: border-color .15s, box-shadow .15s;
}
.pane-me:hover { border-color: var(--brand-200); box-shadow: 0 2px 10px rgba(249,115,22,.1); }
.pane-me-cover {
    position: absolute; top: 0; left: 0; right: 0; height: 7px;
    background: linear-gradient(90deg, #EA580C 0%, #F97316 55%, #FDBA74 100%);
}
.pane-me .avatar { width: 38px; height: 38px; flex: none; }
.pane-me .grow { min-width: 0; }
.pane-me .n {
    display: block; font-weight: 700; font-size: 13.5px; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pane-me .d { display: block; font-size: 11.5px; color: var(--ink-3); }
.pane-me-go { font-size: 18px; color: var(--line-2); flex: none; }
.pane-me:hover .pane-me-go { color: var(--brand); }

.pane-nav {
    display: flex; flex-direction: column; gap: 2px;
    width: 100%; margin-bottom: 12px;
}
.pane-nav a {
    display: flex; align-items: center; gap: 11px;
    padding: 6px 10px; border-radius: 10px;
    font-size: 13.5px; font-weight: 500; color: var(--ink-2);
    transition: background .14s, color .14s;
}
.pane-nav a:hover { background: #fff; color: var(--ink); }
.pane-nav a.on { background: var(--brand-50); color: var(--brand-deep); font-weight: 650; }
.pane-nav .grow { min-width: 0; }

/* A colour per destination.
 *
 * Eight grey rows with eight grey glyphs is a list you read. A tinted chip
 * per destination is a place you aim at — after a week a member reaches for
 * the green one rather than reading the word "Messages", which is how a side
 * rail is actually used.
 *
 * Pale on purpose. Eight saturated squares beside a feed would be eight
 * things competing with the thing the page is for; these are quiet until the
 * row is hovered or current, and then they are the full colour. */
.pane-ico {
    width: 32px; height: 32px; flex: none; border-radius: 9px;
    display: grid; place-items: center;
    transition: background .14s, color .14s, transform .14s;
}
.pane-ico .material-symbols-outlined { font-size: 18px; }

.pane-ico.tone-brand  { background: #FFF1E6; color: #C2410C; }
.pane-ico.tone-blue   { background: #EFF6FF; color: #1D4ED8; }
.pane-ico.tone-green  { background: #ECFDF3; color: #047857; }
.pane-ico.tone-violet { background: #F5F3FF; color: #6D28D9; }
.pane-ico.tone-rose   { background: #FEF2F3; color: #C01048; }
.pane-ico.tone-teal   { background: #ECFEFF; color: #0E7490; }
.pane-ico.tone-indigo { background: #EEF2FF; color: #4338CA; }
.pane-ico.tone-gold   { background: #FFFAEB; color: #B54708; }

.pane-nav a:hover .pane-ico { transform: translateY(-1px); }

/* Current section: the chip inverts, so there is one solid colour in the
   rail and it is the page you are on. */
.pane-nav a.on .pane-ico.tone-brand  { background: #F97316; color: #fff; }
.pane-nav a.on .pane-ico.tone-blue   { background: #2563EB; color: #fff; }
.pane-nav a.on .pane-ico.tone-green  { background: #059669; color: #fff; }
.pane-nav a.on .pane-ico.tone-violet { background: #7C3AED; color: #fff; }
.pane-nav a.on .pane-ico.tone-rose   { background: #E11D48; color: #fff; }
.pane-nav a.on .pane-ico.tone-teal   { background: #0891B2; color: #fff; }
.pane-nav a.on .pane-ico.tone-indigo { background: #4F46E5; color: #fff; }
.pane-nav a.on .pane-ico.tone-gold   { background: #D97706; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .pane-nav a, .pane-ico, .pane-me { transition: none; }
    .pane-nav a:hover .pane-ico { transform: none; }
}

.pane-foot {
    font-size: 11px; color: var(--ink-3); line-height: 1.6; padding: 0 11px;
}
.pane-foot a { color: var(--ink-3); }
.pane-foot a:hover { color: var(--brand-deep); }

/* ───────────────────────────────────────── finish your page */

.pane-meter {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: rgba(17,24,39,.08); margin-bottom: 7px;
}
.pane-meter span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--brand); transition: width .4s ease;
}

.pane-gap {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 8px 0; color: inherit;
    border-bottom: 1px solid rgba(17,24,39,.07);
}
.pane-gap:last-of-type { border-bottom: 0; }
.pane-gap:hover .grow > :first-child { color: var(--brand-deep); }
.pane-gap > .material-symbols-outlined {
    font-size: 18px; color: var(--brand); flex: none; margin-top: 1px;
}
.pane-gap .grow { min-width: 0; font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.pane-gap small {
    display: block; font-size: 11px; font-weight: 400;
    color: var(--ink-3); margin-top: 2px; line-height: 1.45;
    white-space: normal;
}
.pane-gap small.is-note { color: var(--brand-deep); font-style: italic; }
.pane-gap.is-office > .material-symbols-outlined { color: var(--ink-3); }

/* ───────────────────────────────────────── compression notices */

.comp-squeeze {
    margin-top: 10px; padding: 8px 12px;
    background: var(--brand-50); border-radius: 8px;
    font-size: 12.5px; color: var(--brand-deep);
}

.chat-file-chip.is-working { opacity: .6; }