/* ===========================================================================
   The workspace shell: a sticky top bar, a collapsible left navigation, and a
   tabbed content column. Ported from herdwork's app_shell.css and recoloured
   for engulfing.

   Palette, in one sentence: red and green mean down and up here (the logo is a
   bullish engulfing pattern), so no piece of chrome may be either — the accent
   is the azure in custom.css, and graphite does the headings and rules. The
   tokens live in custom.css so the account pages and the shell cannot drift
   into two slightly different greys.

   Loaded after bootstrap.min.css and custom.css.
   =========================================================================== */

:root {
    --shell-bar-h: 52px;
    --shell-nav-w: 216px;
}

body.has-shell {
    background: var(--eg-page);
    /* Bootstrap's .sticky-top navbar is gone on these pages; the shell brings
       its own bar and manages its own scrolling. */
    margin: 0;
}

/* --- top bar -------------------------------------------------------------- */
.shell-bar {
    position: sticky;
    top: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: .7rem;
    height: var(--shell-bar-h);
    padding: 0 .8rem;
    background: #fff;
    border-bottom: 1px solid var(--eg-line);
}
.shell-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    padding: 0 7px;
    border: 0;
    border-radius: 7px;
    background: none;
    cursor: pointer;
    flex: none;
}
.shell-toggle:hover { background: var(--eg-page); }
.shell-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--eg-muted);
}
.shell-brand {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: none;
    text-decoration: none;
    color: var(--eg-ink);
}
.shell-brand:hover { text-decoration: none; color: var(--eg-ink); }
.shell-brand .auth-mark { height: 22px; margin: 0; }
.shell-brand b {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -.015em;
}
.shell-search {
    flex: 1 1 auto;
    max-width: 420px;
    margin: 0 auto;
    position: relative;
}
.shell-search input {
    width: 100%;
    height: 32px;
    border: 1px solid var(--eg-line);
    border-radius: 7px;
    background: var(--eg-page);
    padding: 0 .7rem;
    font-size: .85rem;
    color: var(--eg-ink);
}
.shell-search input:focus {
    outline: none;
    background: #fff;
    border-color: var(--eg-accent);
    box-shadow: 0 0 0 3px rgba(21, 85, 158, .13);
}
.shell-results {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--eg-line);
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(16, 32, 48, .12);
    max-height: 60vh;
    overflow-y: auto;
    padding: .25rem;
    z-index: 80;
}
.shell-results a {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    padding: .35rem .5rem;
    border-radius: 6px;
    color: var(--eg-ink);
    font-size: .85rem;
    text-decoration: none;
}
.shell-results a:hover, .shell-results a.active { background: var(--eg-page); }
.shell-results .k {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .72rem;
    color: var(--eg-muted);
    flex: none;
}
.shell-results .empty { padding: .55rem; color: var(--eg-muted); font-size: .82rem; }

/* Perspective. Not tinted per option: the three are peers, and colouring them
   would spend red or green on chrome. */
.shell-persp {
    display: flex;
    flex: none;
    border: 1px solid var(--eg-line);
    border-radius: 7px;
    overflow: hidden;
}
.shell-persp a {
    padding: .3rem .55rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--eg-muted);
    text-decoration: none;
}
.shell-persp a:hover { background: var(--eg-page); text-decoration: none; }
.shell-persp a.on { background: var(--eg-accent); color: #fff; }

.shell-acct { position: relative; flex: none; }
.shell-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: var(--eg-accent);
    color: #fff;
    font-weight: 700;
    font-size: .78rem;
    cursor: pointer;
}
.shell-drop {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid var(--eg-line);
    border-radius: 9px;
    box-shadow: 0 4px 18px rgba(16, 32, 48, .13);
    padding: .3rem;
    z-index: 80;
}
.shell-drop a {
    display: block;
    padding: .4rem .55rem;
    border-radius: 6px;
    color: var(--eg-ink);
    font-size: .85rem;
    text-decoration: none;
}
.shell-drop a:hover { background: var(--eg-page); text-decoration: none; }
.shell-drop hr { margin: .3rem .2rem; border-color: var(--eg-line); }
.shell-drop .who {
    padding: .35rem .55rem .45rem;
    font-size: .76rem;
    color: var(--eg-muted);
    border-bottom: 1px solid var(--eg-line);
    margin-bottom: .25rem;
    word-break: break-all;
}

/* --- body ----------------------------------------------------------------- */
.shell-body {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--shell-bar-h));
}
.shell-scrim { display: none; }

/* --- left navigation ------------------------------------------------------ */
.shell-nav {
    width: var(--shell-nav-w);
    flex: none;
    background: #fff;
    border-right: 1px solid var(--eg-line);
    padding: .35rem .45rem 2rem;
    overflow-x: hidden;
}
body.nav-closed .shell-nav {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
}
.shell-nav .navsec { min-width: calc(var(--shell-nav-w) - .9rem); }
.shell-nav .navsec-h {
    display: flex;
    align-items: center;
    gap: .35rem;
    width: 100%;
    padding: .55rem .45rem .25rem;
    border: 0;
    background: none;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* --eg-muted, not a fainter grey: at this size and weight anything lighter
       drops under 4.5:1 and the section headings become the hardest thing on
       the page to read. */
    color: var(--eg-muted);
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
}
.shell-nav .navsec-h:hover { background: var(--eg-page); }
.shell-nav .navsec-tw { font-size: .55rem; width: 10px; flex: none; }
.shell-nav .navsec.folded .navsec-b { display: none; }
.shell-nav .navsec-star { color: #d9a441; }

.shell-nav a.navrow {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .45rem;
    border-radius: 6px;
    font-size: .85rem;
    color: var(--eg-ink);
    text-decoration: none;
    min-width: 0;
}
.shell-nav a.navrow:hover { background: var(--eg-page); text-decoration: none; }
.shell-nav a.navrow.on {
    background: #e7eefa;
    font-weight: 600;
    color: #0e4483;
    box-shadow: inset 2px 0 0 var(--eg-accent);
}
.shell-nav a.navrow .g {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* A destination a signed-out visitor cannot reach. Shown, not hidden: the nav
   is where somebody learns what they are missing. */
.shell-nav a.navrow.locked { color: var(--eg-muted); }
.navpill {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--eg-wait);
    border: 1px solid #eccf90;
    border-radius: 3px;
    padding: 0 .2rem;
    flex: none;
}
.navstar {
    border: 0;
    background: none;
    color: #d9a441;
    font-size: .8rem;
    line-height: 1;
    padding: 0 .15rem;
    flex: none;
    cursor: pointer;
}

/* --- main column ---------------------------------------------------------- */
.shell-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.shell-crumb {
    padding: .6rem 1.1rem 0;
    font-size: .74rem;
    color: var(--eg-muted);
}
.shell-crumb a { color: var(--eg-muted); }
.shell-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .15rem 1.1rem .45rem;
}
.shell-title h1 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0;
    color: var(--eg-ink);
}
.shell-chip {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .7rem;
    color: var(--eg-muted);
    border: 1px solid var(--eg-line);
    border-radius: 4px;
    padding: 0 .3rem;
}
.shell-title .spacer { margin-left: auto; }

/* The tab strip scrolls sideways rather than wrapping, so every tab stays
   reachable with a swipe on a phone instead of being clipped. */
.shell-tabs {
    display: flex;
    gap: .1rem;
    padding: 0 .95rem;
    background: #fff;
    border-bottom: 1px solid var(--eg-line);
    overflow-x: auto;
    scrollbar-width: none;
}
.shell-tabs::-webkit-scrollbar { display: none; }
.shell-tabs a {
    flex: none;
    white-space: nowrap;
    padding: .5rem .7rem;
    font-size: .84rem;
    color: var(--eg-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.shell-tabs a:hover { color: var(--eg-ink); text-decoration: none; }
.shell-tabs a.on {
    color: var(--eg-accent);
    border-bottom-color: var(--eg-accent);
    font-weight: 600;
}

.shell-view { flex: 1; padding: .9rem 1.1rem 3rem; min-width: 0; }
/* Content pages were written inside Bootstrap's centred .container. Inside the
   shell the nav already provides the left margin, so the container stops
   centring and simply fills the column. */
.shell-view > .container,
.shell-view > .container-fluid { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }

/* --- narrow --------------------------------------------------------------- */
@media (max-width: 900px) {
    .shell-search { max-width: none; }
    .shell-persp { display: none; }
    /* The nav becomes an overlay rather than squeezing the content: below this
       width there is not enough room for both, and a 216px column beside a
       table leaves neither usable. */
    .shell-nav {
        position: fixed;
        top: var(--shell-bar-h);
        bottom: 0;
        left: 0;
        z-index: 60;
        overflow-y: auto;
        box-shadow: 0 6px 24px rgba(16, 32, 48, .18);
    }
    body.nav-closed .shell-nav { display: none; }
    body:not(.nav-closed) .shell-scrim {
        display: block;
        position: fixed;
        top: var(--shell-bar-h);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(16, 32, 48, .35);
        z-index: 55;
    }
}

/* --- dashboard ------------------------------------------------------------
   A strip of numbers, then a grid of cards. The strip is the only place in the
   shell where red and green appear, and they mean exactly one thing there:
   the direction of a move. That is why nothing else in this stylesheet is
   allowed to be either colour. */
.dash-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}
.dash-stat {
    background: #fff;
    border: 1px solid var(--eg-line);
    border-radius: 7px;
    padding: .5rem .7rem;
    text-decoration: none;
    color: inherit;
    display: block;
}
.dash-stat:hover { border-color: var(--eg-accent); text-decoration: none; color: inherit; }
.dash-stat .n {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    /* Digits in a row of tiles have to line up, or the eye reads the widths
       instead of the values. */
    font-variant-numeric: tabular-nums;
}
.dash-stat .l {
    font-size: .72rem;
    color: var(--eg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-stat .c { font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.eg-up { color: var(--eg-up); }
.eg-dn { color: var(--eg-dn-text); }
.eg-flat { color: var(--eg-muted); }

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: .8rem;
    align-items: start;
}
.dash-card {
    background: #fff;
    border: 1px solid var(--eg-line);
    border-radius: 7px;
    overflow: hidden;
}
.dash-card > h2 {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .45rem .7rem;
    background: var(--eg-page);
    border-bottom: 1px solid var(--eg-line);
    font-size: .8rem;
    font-weight: 700;
    color: var(--eg-ink);
}
.dash-card > h2 .n {
    margin-left: auto;
    font-size: .72rem;
    font-weight: 600;
    color: var(--eg-muted);
    font-variant-numeric: tabular-nums;
}
.dash-card > h2 a { margin-left: auto; font-size: .72rem; font-weight: 600; }
.dash-row {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .35rem .7rem;
    border-bottom: 1px solid #eef1f5;
    font-size: .8rem;
    color: inherit;
    text-decoration: none;
}
a.dash-row:hover { background: var(--eg-page); text-decoration: none; color: inherit; }
.dash-row:last-child { border-bottom: 0; }
.dash-row .g { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row .t {
    flex: none;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .72rem;
    color: var(--eg-muted);
    font-variant-numeric: tabular-nums;
}
.dash-empty { padding: .7rem; color: var(--eg-muted); font-size: .8rem; font-style: italic; }

/* The shell is a screen thing. Printing wants the content and nothing else. */
@media print {
    .shell-bar, .shell-nav, .shell-tabs, .shell-scrim { display: none !important; }
    .shell-view { padding: 0; }
}