/* =========================================================================
 * bf-headless.css — the headless page shell
 * -------------------------------------------------------------------------
 * No chrome bar. A transparent row carries only the two things that must
 * float above the page — the drawer button (mobile) and the account island —
 * and the page announces itself with on-page text instead of a glass capsule.
 * Same construction matches.html uses, extracted so every page shares one
 * implementation rather than three near-copies.
 *
 * A page opts in by adding `bf-shell-nav` to its bar (and REMOVING `bf-topbar`,
 * which is what draws the capsule) plus a `bf-page-head` block for the title.
 *
 * Accent is a token, so a gold page overrides just this:
 *     .bf-page-title h1 { --bf-hl-grad: linear-gradient(96deg,#ffe89a,#ffcc01,#ffa800); }
 * ========================================================================= */

:root {
    --bf-hl-x: 34px;          /* page gutter — title, content and island align to it */
    --bf-hl-top: 16px;
    --bf-hl-hair: rgba(255, 255, 255, 0.08);
    --bf-hl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── The floating row ──
   On desktop this collapses: the account island lives in the page head so the
   title and the island share ONE band instead of leaving an empty strip between
   them. It only reappears for pages that must show something up here on desktop
   too (a back control) — those add .bf-shell-nav--keep. */
.bf-shell-nav {
    display: none;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    padding: var(--bf-hl-top) var(--bf-hl-x) 0;
    position: relative;
    z-index: 100;
    /* Explicitly flat: this element must never paint a bar again. */
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.bf-shell-nav--keep { display: flex; }
/* Anything that ends up in this row keeps the island pinned right. */
.bf-shell-nav > #bf-account-slot { margin-left: auto; }

/* Drawer button — hidden on desktop, where the sidebar is always present. */
.bf-shell-nav .bf-hl-menu {
    display: none;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bf-hl-hair);
    border-radius: 13px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary, #00d4ff);
    font-size: 1.15em;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: 0.2s var(--bf-hl-ease);
    -webkit-tap-highlight-color: transparent;
}
.bf-shell-nav .bf-hl-menu:hover { background: rgba(255, 255, 255, 0.1); }
.bf-shell-nav .bf-hl-menu:active { transform: scale(0.94); }

/* ── On-page title ── */
.bf-page-head {
    display: flex;
    /* Centre, not flex-end: the island sits in this row now and must line up
       with the title rather than hang off its baseline. */
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0 var(--bf-hl-x) 18px;
    margin: var(--bf-hl-top) 0 22px;
    border-bottom: 1px solid var(--bf-hl-hair);
}
/* Inside an already-padded scroll container the gutter is not ours to add. */
.bf-page-head.flush { padding-left: 0; padding-right: 0; }

.bf-page-title { min-width: 0; }
.bf-page-title h1 {
    --bf-hl-grad: linear-gradient(96deg, #7fe6ff 0%, #00d4ff 48%, #0088ff 100%);
    margin: 0;
    font-family: 'Blastron', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    /* Apple's large-title behaviour: fluid, clamped so it neither crowds the
       island on a phone nor floats loose on an ultrawide. */
    font-size: clamp(1.7rem, 1.15rem + 2vw, 2.5rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1;
    background: var(--bf-hl-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 16px rgba(0, 170, 255, 0.28));
    overflow-wrap: anywhere;
}
.bf-page-title .bf-sub {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 9px;
    font-family: 'Blastron', sans-serif;
    font-size: 0.82em;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.34);
}
.bf-page-title .bf-sub p { margin: 0; }

/* Trailing controls of the head row (search, filters, actions) */
.bf-page-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* A small status/count pill, the one accent allowed up here */
.bf-chip {
    font-family: 'Blastron', sans-serif;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--primary, #00d4ff);
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 20px;
    padding: 4px 11px;
    white-space: nowrap;
}

@media (max-width: 1400px) { :root { --bf-hl-x: 26px; } }

@media (max-width: 1000px) {
    :root { --bf-hl-x: 18px; --bf-hl-top: 14px; }
    /* The row comes back for the drawer button. */
    .bf-shell-nav { display: flex; }
    .bf-shell-nav .bf-hl-menu { display: inline-flex; }
    /* Title first, controls on their own full-width row underneath. */
    .bf-page-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 10px; }
    .bf-page-title { width: 100%; }
    .bf-page-tools { width: 100%; }
    /* Island trails the tools row and stays hard right. */
    .bf-page-tools > #bf-account-slot { margin-left: auto; }
}

@media (max-width: 560px) {
    :root { --bf-hl-x: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .bf-shell-nav .bf-hl-menu { transition: none; }
}