/* The navigation: the bar, the two links, the door and sheet a phone gets, and
   the drawer the profile picture opens on a laptop. Drawn by macros/nav.html,
   partials/_nav_sheet.html and partials/_account_drawer.html, and driven by
   js/nav.js -- which existed with no stylesheet beside it, because all 287
   lines of this were inside base.html.

   Two rules here name the currency picker. They are overrides of what it looks
   like inside the sheet, they win on specificity rather than on source order,
   and the picker itself is currency-picker.css. */

.navbar {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color);
    /* A bar that floats over the page should cast something, or it is
       just the first stripe of the page. */
    box-shadow: 0 2px 16px rgba(0,0,0,.34);
}
[data-mode="light"] .navbar { box-shadow: 0 2px 14px rgba(0,0,0,.09); }
.navbar-brand { color: var(--text-primary) !important; font-weight: 700; }
/* Only on the three pages you scan -- see `nav_sticky` in app/__init__.py
   for which and why. Below the drawers at 1180/1181 so a sheet still
   covers it, above everything a page draws for itself. */
.navbar.is-sticky { position: sticky; top: 0; z-index: 1020; }

/* The two links. Left of the page, beside the logo, because that is
   where a reader looks for where else they can go. */
.bt-nav-links { align-items: center; gap: 4px; margin-left: 26px; }
.bt-nav-link {
    display: inline-block; padding: 7px 13px; border-radius: 50px;
    font-size: 0.86rem; font-weight: 600; text-decoration: none;
    color: var(--text-secondary); white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}
.bt-nav-link:hover { color: var(--text-primary); background: var(--bg-tertiary); }
/* Where you are, said once. A pill rather than an underline, because
   the bar already has a rule under it and two horizontal lines a few
   pixels apart read as a mistake. */
.bt-nav-link.is-here {
    color: var(--text-primary); background: var(--bg-tertiary);
}
/* ── THE PHONE'S DOOR AND ITS SHEET ──
   One control instead of four. The bars say a menu is here and the face
   says it is also yours: a photograph alone is a fine account button and
   a poor menu button, and signed out it is a picture of nobody. Settled
   in mockups/nav-lab.html as N2, door N2a. */
.bt-menu { position: relative; }
.bt-menu > summary { list-style: none; }
.bt-menu > summary::-webkit-details-marker { display: none; }
.bt-door {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    border: 1px solid var(--border-color); border-radius: 999px;
    padding: 3px 3px 3px 12px; background: none;
}
.bt-door:hover { border-color: var(--accent-color); }
.bt-door:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.bt-door-bars { width: 17px; height: 17px; fill: none; stroke: var(--text-secondary);
    stroke-width: 2; stroke-linecap: round; }
.bt-door-face {
    width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
    background: var(--bg-tertiary); display: grid; place-items: center; flex: 0 0 auto;
}
.bt-door-face img { width: 100%; height: 100%; object-fit: cover; }
.bt-door-face i, .bt-door-face svg { width: 15px; height: 15px; color: var(--text-muted); }

/* Any sheet, not only this one: Settings opens its sections in the same
   thing, and js/nav.js drives every `details[data-bt-menu-sheet]` alike. */
.bt-menu-scrim {
    position: fixed; inset: 0; z-index: 1180; background: rgba(0,0,0,.45);
    transition: opacity .28s ease-out;
}
.bt-menu-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1181;
    max-height: 86%; overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg-elevated); color: var(--text-primary);
    border-radius: 20px 20px 0 0; padding: 0 8px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(0,0,0,.3);
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
/* The handle is the whole strip it sits in, not the pill, because a 36px
   pill is too small a thing to find with a thumb. It stays put while the
   list scrolls under it, so there is always something to take hold of. */
.bt-menu-grab {
    display: block; position: sticky; top: 0; z-index: 1;
    height: 26px; margin: 0 -8px 2px;
    background: var(--bg-elevated); cursor: grab; touch-action: none;
}
.bt-menu-grab::before {
    content: ""; position: absolute; top: 10px; left: 50%;
    width: 36px; height: 5px; margin-left: -18px; border-radius: 5px;
    background: var(--border-color);
}
/* It rises from the edge it lives on and goes back to it, and in between
   it is wherever the finger has it. The fill is `backwards` and not `both`:
   an animation holding its last frame outranks the inline transform nav.js
   drags with, and the sheet would stop following. Out is quicker than in.
   `is-closing` is held on by nav.js until the slide ends, because a
   `<details>` closing takes its children off the page instantly. */
.bt-menu[open] .bt-menu-sheet { animation: btSheetIn .3s cubic-bezier(.22,.61,.36,1) backwards; }
.bt-menu[open] .bt-menu-scrim { animation: btFadeIn .3s ease-out backwards; }
.bt-menu.is-dragging .bt-menu-sheet,
.bt-menu.is-dragging .bt-menu-scrim { transition: none; }
.bt-menu.is-dragging .bt-menu-grab { cursor: grabbing; }
.bt-menu.is-closing .bt-menu-sheet {
    animation: none; transform: translateY(100%);
    transition: transform .2s cubic-bezier(.4,0,.7,.2);
}
.bt-menu.is-closing .bt-menu-scrim { animation: none; opacity: 0; transition: opacity .2s ease-in; }
@keyframes btSheetIn { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .bt-menu[open] .bt-menu-sheet, .bt-menu[open] .bt-menu-scrim { animation: none; }
    .bt-menu-sheet, .bt-menu-scrim,
    .bt-menu.is-closing .bt-menu-sheet, .bt-menu.is-closing .bt-menu-scrim { transition: none; }
}

/* Who you are, and what you are being quoted in: two facts about the
   reader, so they share a line above the rule that separates them from
   the places you can go. */
.bt-menu-who { display: flex; align-items: center; gap: 11px; padding: 10px 12px 12px; }
.bt-menu-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
    background: var(--bg-tertiary); display: grid; place-items: center;
    border: 2px solid var(--border-color); }
.bt-menu-av img { width: 100%; height: 100%; object-fit: cover; }
.bt-menu-av i, .bt-menu-av svg { width: 16px; height: 16px; color: var(--text-muted); }
.bt-menu-wt { min-width: 0; flex: 1 1 auto; }
.bt-menu-wt b { display: block; font-size: .9rem; letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-menu-wt span { display: block; font-size: .74rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-menu-who .bt-currency-btn { margin-left: auto; flex: 0 0 auto; }
.bt-menu-rule { height: 1px; background: var(--border-color); border: 0;
    margin: 6px 10px; opacity: 1; }
/* Team: the rows that are working for Buckettrips, not traveling with it
   (Coordinator portal, Admin), under a rule and a quiet label. */
.bt-menu-head { padding: 4px 12px 2px; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted); }

.bt-menu-item {
    display: flex; align-items: center; gap: 11px; padding: 12px;
    border-radius: 10px; font-size: .95rem; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.bt-menu-item, .bt-menu-item:hover, .bt-menu-item:focus-visible { color: var(--text-primary); }
.bt-menu-item:hover { background: var(--bg-secondary); }
.bt-menu-item:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }
.bt-menu-item.is-here { background: var(--bg-secondary); color: var(--accent-color); }
.bt-menu-item i, .bt-menu-item svg { width: 18px; height: 18px; opacity: .6; flex: 0 0 auto; }
.bt-menu-item.is-here i, .bt-menu-item.is-here svg { opacity: 1; }
.bt-menu-item-sm { font-size: .89rem; font-weight: 500; padding: 11px 12px;
    color: var(--text-secondary); }

/* A choice that needs a screen gets one inside the sheet, pushed over
   the list, rather than a dialog opening on top of an open sheet. */
.bt-menu-pane { padding-bottom: 4px; }
.bt-menu-phead { display: flex; align-items: center; gap: 9px; padding: 4px 6px 10px; }
.bt-menu-phead b { font-size: .95rem; font-weight: 700; letter-spacing: -.018em; }
.bt-menu-back {
    width: 30px; height: 30px; border-radius: 50%; border: 0; flex: 0 0 auto;
    background: var(--bg-secondary); color: var(--text-primary);
    display: grid; place-items: center; cursor: pointer;
}
.bt-menu-back:hover { color: var(--accent-color); }
.bt-menu-back:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.bt-menu-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
    stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bt-menu-wait { padding: 22px 12px; text-align: center; font-size: .86rem;
    color: var(--text-muted); margin: 0; }
/* The currency grid was drawn for a 560px dialog; in the sheet it is
   the whole width and has no padding of its own to add. */
.bt-menu-pbody .bt-cur-wrap { padding: 0 4px 4px; }

/* Appearance is one switch, so it is a switch rather than a link to a
   dialog containing a switch. Not a link at all, hence the div. */
.bt-menu-item.is-switch { cursor: default; }
.bt-menu-item.is-switch:hover { background: none; }
.bt-menu-item.is-switch .toggle-switch { margin-left: auto; flex: 0 0 auto; }

/* iOS ignores `overflow:hidden` on the body, so the page is pinned. */
body.bt-menu-open { position: fixed; left: 0; right: 0; width: 100%; }
@media (max-width: 767.98px) {
    .bt-nav-links { margin-left: 0; gap: 2px; }
    .bt-nav-link { padding: 6px 10px; font-size: 0.8rem; }
}
/* On a phone the bar is the only chrome on the screen, and at 20px the
   name and the avatar were the smallest things on it. The sizes are
   written inline on the elements, hence the !important. */
@media (max-width: 1023px) {
    .navbar-brand img { height: 26px !important; }
}
/* ══ THE DESKTOP DRAWER ══
   What the profile picture opens on a laptop. It replaces a 200px
   dropdown that held the reader's own email address and four settings.
   Settled in mockups/account-lab.html (A4, shape D1) and drawn as it
   ships in account-lab-2.html. */
.bt-acc { position: relative; }
.bt-acc > summary { list-style: none; cursor: pointer; display: inline-flex; }
.bt-acc > summary::-webkit-details-marker { display: none; }
/* T2: the photograph with a chevron tucked into the ring, which is the
   smallest thing that says it opens. */
.bt-acc-door { position: relative; display: inline-flex; }
.bt-acc-face {
    width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
    background: var(--bg-tertiary); display: grid; place-items: center;
    border: 2px solid var(--border-color); transition: border-color .15s ease;
}
.bt-acc-face img { width: 100%; height: 100%; object-fit: cover; }
.bt-acc-face i, .bt-acc-face svg { width: 14px; height: 14px; color: var(--text-muted); }
.bt-acc-door:hover .bt-acc-face { border-color: var(--accent-color); }
.bt-acc > summary:focus-visible .bt-acc-face {
    outline: 2px solid var(--accent-color); outline-offset: 2px;
}
.bt-acc-cue {
    position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--bg-primary);
    border: 1px solid var(--border-color); display: grid; place-items: center;
}
.bt-acc-cue svg { width: 8px; height: 8px; fill: none; stroke: var(--text-secondary);
    stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.bt-acc-scrim { position: fixed; inset: 0; z-index: 1180; background: rgba(0,0,0,.35); }
.bt-acc-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1181; width: 340px;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--card-bg); border-left: 1px solid var(--border-color);
    padding: 14px 10px; box-shadow: -14px 0 44px rgba(0,0,0,.22);
}
/* It comes in from the edge it lives on, and goes back to it. Out is
   quicker than in, which is the usual asymmetry: arriving is worth
   watching and leaving is not. `is-closing` is held on by nav.js until
   the animation ends, because a `<details>` closing takes its children
   off the page instantly and there would be nothing left to animate. */
.bt-acc[open] .bt-acc-panel { animation: btDrawerIn .26s cubic-bezier(.22,.61,.36,1) both; }
.bt-acc[open] .bt-acc-scrim { animation: btFadeIn .26s ease-out both; }
.bt-acc.is-closing .bt-acc-panel { animation: btDrawerOut .19s cubic-bezier(.4,0,.7,.2) both; }
.bt-acc.is-closing .bt-acc-scrim { animation: btFadeOut .19s ease-in both; }
@keyframes btDrawerIn  { from { transform: translateX(100%); } to { transform: none; } }
@keyframes btDrawerOut { from { transform: none; } to { transform: translateX(100%); } }
@keyframes btFadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes btFadeOut   { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .bt-acc[open] .bt-acc-panel, .bt-acc[open] .bt-acc-scrim,
    .bt-acc.is-closing .bt-acc-panel, .bt-acc.is-closing .bt-acc-scrim { animation: none; }
}

.bt-acc-who { display: flex; align-items: center; gap: 11px; padding: 10px 12px; }
.bt-acc-av {
    width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
    background: var(--bg-tertiary); display: grid; place-items: center;
    border: 2px solid var(--border-color);
}
.bt-acc-av img { width: 100%; height: 100%; object-fit: cover; }
.bt-acc-av i, .bt-acc-av svg { width: 17px; height: 17px; color: var(--text-muted); }
.bt-acc-wt { min-width: 0; }
.bt-acc-wt b { display: block; font-size: .88rem; font-weight: 700; letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-acc-wt span { display: block; font-size: .74rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-acc-rule { height: 1px; background: var(--border-color); border: 0; margin: 5px 6px; opacity: 1; }

.bt-acc-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
    font-size: .85rem; font-weight: 500; text-decoration: none;
}
.bt-acc-item, .bt-acc-item:hover { color: var(--text-secondary); }
.bt-acc-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.bt-acc-item:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }
.bt-acc-item i, .bt-acc-item svg { width: 16px; height: 16px; opacity: .75; flex: 0 0 auto; }
/* Appearance is one switch, so it is the switch and not a link to a
   dialog containing it. Same row the phone's sheet draws. */
.bt-acc-item.is-switch { cursor: default; }
.bt-acc-item.is-switch:hover { background: none; }
.bt-acc-item.is-switch .toggle-switch { margin-left: auto; flex: 0 0 auto; }
/* The count a row carries. Set in mono and tabular so two rows of
   numbers line up on their own edge rather than wandering with the
   digits. Zero is printed: the tail is the row's whole job here, and a
   missing number reads as "we did not check" rather than as "none". */
.bt-acc-item .tail, .bt-menu-item .tail {
    margin-left: auto; flex: 0 0 auto;
    font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
    font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.bt-acc-item:hover .tail { color: var(--text-secondary); }

/* The trip, first, because it is the only thing in here that is not
   administration. The number is counted from today. */
.bt-acc-trip {
    position: relative; display: block; margin: 2px 2px 6px; border-radius: 10px;
    overflow: hidden; background: var(--bg-tertiary);
}
.bt-acc-trip img { width: 100%; height: 118px; object-fit: cover; display: block; }
.bt-acc-veil { position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.84) 0%, rgba(0,0,0,.16) 58%, rgba(0,0,0,0) 100%); }
.bt-acc-away {
    position: absolute; top: 10px; left: 12px; border-radius: 20px; padding: 3px 8px;
    background: var(--brand-highlight); color: var(--brand-highlight-text);
    font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .02em;
}
.bt-acc-cap { position: absolute; left: 12px; right: 12px; bottom: 9px; color: var(--white); }
.bt-acc-cap b { display: block; font-size: .94rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.bt-acc-cap span { display: block; font-size: .74rem; opacity: .86; margin-top: 2px; }
/* Something is the reader's to do: a strip across the top of the trip's
   photograph, the countdown moved aside. The booking page says what.
   The emails remind them too; a dot on the avatar waits for a second kind of
   notice, and then for one list of them all (N31). */
.bt-acc-owe {
    position: absolute; top: 0; left: 0; right: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px; background: var(--brand-highlight); color: var(--brand-highlight-text);
    font-size: .72rem; font-weight: 700; letter-spacing: .01em;
}
.bt-acc-owe svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round; }
/* With the strip on top, the countdown steps aside: bottom right, quiet. */
.bt-acc-trip.is-owed .bt-acc-away { top: auto; left: auto; right: 10px; bottom: 10px; z-index: 1;
    background: rgba(0, 0, 0, .45); color: var(--white); backdrop-filter: blur(4px); }
.bt-acc-trip.is-owed .bt-acc-cap { right: 92px; }


/* Signed out. No icon of a generic person and no colored banner: what
   the browser has saved, then one line and two buttons. */
.bt-acc-ask { padding: 8px 12px 10px; }
.bt-acc-ask b { display: block; font-size: 1.02rem; font-weight: 700;
    letter-spacing: -.022em; color: var(--text-primary); }
.bt-acc-ask p { margin: 6px 0 13px; font-size: .79rem; color: var(--text-muted); line-height: 1.5; }
.bt-acc-btns { display: flex; flex-direction: column; gap: 7px; }
.bt-acc-btn {
    display: block; text-align: center; border-radius: 9px; padding: 9px 10px;
    font-size: .8rem; font-weight: 600; text-decoration: none;
    border: 1px solid var(--border-color); color: var(--text-primary);
}
.bt-acc-btn:hover { color: var(--text-primary); border-color: var(--accent-color); }
.bt-acc-btn.is-fill { border: 0; background: var(--accent-gradient); color: var(--accent-text); }
.bt-acc-btn.is-fill:hover { color: var(--accent-text); opacity: .94; }
.bt-acc-mini {
    font-family: var(--font-mono); font-size: .58rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--text-muted); font-weight: 700;
    padding: 6px 8px; display: flex; align-items: center;
}
.bt-acc-mini span { margin-left: auto; letter-spacing: .04em; }
.bt-acc-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 9px;
    text-decoration: none; }
.bt-acc-row:hover { background: var(--bg-tertiary); }
.bt-acc-row img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover;
    flex: 0 0 auto; background: var(--bg-tertiary); }
.bt-acc-row b { display: block; font-size: .79rem; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The next trip's row once nothing is the reader's to do: the same row, quiet. */
.bt-acc-todo.is-quiet svg { stroke: var(--text-muted); }

/* Log out is a form, so it posts (macros/nav.html): its button draws as the row links beside it. */
.bt-menu-form { margin: 0; }
/* No weight of its own, so the row's class decides how it looks; this only takes the button's defaults off. */
:where(.bt-menu-form > button) { background: none; border: 0; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }