/* What the page offers each kind of user (core/session.js puts no-<capability> classes on <body>).
   The server enforces access (app/access.py); this only keeps unusable controls out of sight.
   Mark an element with data-requires="flights" / "alerts" / "save" / "layout" / "manage" / "publish". */
body.no-flights [data-requires~="flights"],
body.no-alerts [data-requires~="alerts"],
body.no-save [data-requires~="save"],
body.no-layout [data-requires~="layout"],
body.no-manage [data-requires~="manage"],
body.no-publish [data-requires~="publish"],
body.no-stations [data-requires~="stations"] {
    display: none !important;
}

/* Shown only to visitors (not signed in), or only on the public map (visitors and members). */
[data-visitor-only],
[data-public-only] {
    display: none !important;
}

body.is-visitor [data-visitor-only],
body.is-public [data-public-only] {
    display: revert !important;
}

#publicNotice[hidden],
#publicNotice .public-demo[hidden] {
    display: none !important;
}

#publicNotice .public-demo strong {
    color: #e6edf5;
}

#publicNotice button.public-demo-reset {
    margin-left: 2px;
    text-decoration: underline;
    font-size: inherit;
}

/* Decision-support notice for the public map: bottom-left, over the map, out of the way of the timeline. */
#publicNotice {
    position: fixed;
    /* bottom-left corner of the map itself (same variables as css/map.css's #map) */
    left: calc(var(--leftbar-offset, 0px) + 8px);
    bottom: calc(var(--timeline-h, 0px) + var(--hub-drawer-h, 0px) + 8px);
    z-index: 600; /* above #map (500), below menus and dialogs */
    max-width: min(440px, calc(100vw - var(--leftbar-offset, 0px) - var(--rightbar-offset, 0px) - 16px));
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(12, 16, 22, 0.78);
    color: #c9d1dc;
    font-size: 11px;
    line-height: 1.35;
    pointer-events: auto;
}

#publicNotice a {
    color: inherit;
}

#publicNotice button {
    margin-left: 6px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
}

/* A visitor's user button says "Sign in" at every width (layout.css hides the name on narrower windows). */
body.is-visitor #topbar-user-controls .topbar-user-name {
    display: inline;
}