/* ============================================================================
   v0.8.3.0 - the board's section nav as ONE segmented element.

   Replaces four separate gold capsules (Pit / Store / Friends / bug report) with
   one strip. Geometry: capsule proportions with SHARP corners - a parallelogram.
   One border, one background, one shadow for the whole thing; the sections only
   divide it, so it reads as a single control rather than chips that happen to sit
   side by side.

   Contrast: the old chip was #FFD700 gold text on a violet-to-gold gradient, kept
   barely legible by a double black text-shadow under the letters - 10-pit-slot.css
   said as much in a comment. Gold-on-gold was the defect, the text-shadow was the
   crutch. Here the label is near-white with no shadow at all, and gold carries the
   identity where it costs no legibility: the icon, the hairline, the hover tint.

   Hover: the section under the cursor GROWS. It grows by widening its own absolutely
   positioned panel, which is a PAINT-ONLY change - an out-of-flow box cannot move
   anything, so nothing in the top bar shifts and the page never twitches. Growing
   the section's own padding, or letting a label animate open, would relayout the
   strip and shove the whole icon cluster sideways on every pointer move. The strip
   clips the overhang at its ends, so a widened section stops at the plate's edge.

   Pointer-only, desktop-only: on a phone there is no cursor to hover with, the
   labels are not rendered at all, and a growing panel would be motion nobody asked
   for. The rule set lives behind `min-width: 721px` AND `hover: hover`.

   THE SKEW LIVES ON PSEUDO-ELEMENTS, NOT ON THE ELEMENTS THEMSELVES. This is
   load-bearing, not a style choice: a transformed element becomes the containing
   block for every position:fixed descendant, so a `transform: skewX()` on the
   strip would re-anchor the bug-report dialog's full-screen backdrop to the strip
   and drag it out of the viewport. Painting the slanted plate with ::before keeps
   the DOM upright, which is also why the content needs no counter-skew.

   Mobile first, per the owner directive that 375px is verification priority 1:
   the base rules here ARE the phone layout and the media query only widens it.
   ============================================================================ */

.topnav {
    position: relative;
    display: flex;
    align-items: stretch;
    /* The slanted plate leans out of the box by height*tan(12deg), about 6px at
       this height; the inline margin gives that overhang somewhere to go so the
       strip never laps onto its neighbours. Not padding to taste - shrink it below
       the overhang and the corners collide. */
    margin: 0 6px;
    /* NO overflow clip. It used to be here to contain a hover-widened section, and it
       sliced the plate's two pointed ends off square: the strip is a parallelogram but
       the clip is a rectangle, so the slanted corners came out chopped and the shape
       read as a rectangle with something wrong at its edges. The ends are contained by
       the first/last-child hover rules instead, which grow those sections inward only,
       and the corners outside the parallelogram are simply not painted - transparent,
       whatever the page is sitting on. */
}

/* The plate: background, hairline and the one shadow, skewed as a whole. */
.topnav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: skewX(-12deg);
    border: 1px solid rgba(255, 215, 0, 0.32);
    /* No border-radius: a radius on a skewed box rounds in the PRE-transform space and
       comes out lopsided, one corner tighter than the next. Sharp corners were the
       brief anyway - "capsule, but with sharp corners". */
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.30), rgba(76, 29, 149, 0.34));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.topnav-seg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* No shrinking: the sections size to their own content and the strip sizes to
       them. Left shrinkable, flex would squeeze whichever section the cursor is
       trying to open back down to nothing. */
    flex: 0 0 auto;
    /* Tight by default: the phone top bar is a ONE-ROW promise (02-main-layout.css
       does the flex switch) and every pixel here competes with the avatar chip, the
       settings gear and sign-out. Desktop loosens it below. */
    padding: 5px 6px;
    border: 0;
    background: none;
    color: #F4F1FF;
    /* v0.8.3.2: the app's own navigation register, not the casino chip's. The old
       labels were 700-weight 11px with letter-spacing: 0.18em, inherited from the gold
       .pit-topbar-label these sections replaced, and that wide tracking is what made
       them read as a different product from the calendar switcher next to them.
       Matched to .horizon-tab (06-planning-tasks.css), which is what navigation looks
       like here: Inter, weight 500, no tracking. Size is 13px rather than the tabs'
       16px because this is a compact bar, and 13px is the size the rest of the app's
       secondary UI text already uses.

       The colour stays a literal: the plate underneath is a fixed violet gradient in
       both themes, so a theme token would go dark on it in light mode. */
    font-family: var(--chronos-font-sans);
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    /* Nothing about the BOX animates. Every hover effect below is confined to the
       absolutely positioned ::before panel so the strip's layout is frozen. */
}

/* Each section's own slanted panel: the divider on its leading edge, and the tint
   that lights up on hover. Same skew as the plate, so the two tile exactly. */
.topnav-seg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: skewX(-12deg);
    border-left: 1px solid rgba(255, 215, 0, 0.22);
    background: transparent;
    /* inset is the growth axis; both properties are paint-only on an out-of-flow box. */
    transition: background 0.18s ease-out, inset 0.2s ease-out;
    pointer-events: none;
}

.topnav-seg:first-child::before { border-left: 0; }

/* Content rides above both plates and needs no counter-skew - nothing in the DOM
   is transformed. */
.topnav-seg-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}

/* v0.8.3.1: drawn PNGs (wwwroot/img/topnav) instead of emoji. Shipped at 64px for
   high-DPI and drawn at 20, so a phone downloads ~3KB apiece rather than the 512px
   originals. object-fit guards against a non-square source sneaking in later. */
.topnav-icon {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Phone: not rendered at all. The strip is icon-only there, the title attribute
   carries the name for anyone who long-presses, and the accessible name comes off
   the link's own aria-label. Nothing to animate open, nothing to reflow. */
.topnav-label { display: none; }

/* The friends badge rides the section body; it only needs pulling onto the icon's
   corner. Upright already, since nothing here is transformed. */
.topnav-dot {
    position: absolute;
    top: -7px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--chronos-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0;
    pointer-events: none;
}

/* ---- utility sections: profile, settings, sign-out ---------------------------
   v0.8.3.1: these three used to sit outside as standalone pills, each with its own
   card background, outline and pill radius. Inside the strip that chrome fights the
   plate, so it is neutralised here rather than in the files that own those controls
   - they still render as pills anywhere else they are used.

   Icon-only at every width, deliberately: they are utilities, not destinations, and
   four labels plus three more would not fit any phone. Their names come off
   title/aria-label, which every one of them already carries.                      */
.topnav > .user-chip,
.topnav > .logout-btn,
.topnav > .topnav-seg-settings {
    background: none;
    border: 0;
    border-radius: 0;
    width: auto;
    height: auto;
    box-shadow: none;
}

/* The username text does not come along at all - it is a word, not a glyph, and the
   avatar already identifies the account - so it is simply absent from the markup here.
   Which means this override is needed: 01-topbar.css hides `.user-chip > span:first-child`
   on phones to drop that username, and the section body IS a span and IS now the first
   child, so the legacy rule was hiding the avatar along with it. */
.topnav > .user-chip > .topnav-seg-body { display: flex; }

/* flex: 0 0 auto for the same reason as .topnav-label: .avatar carries
   overflow: hidden, which removes a flex item's automatic minimum size, so the
   default flex-shrink: 1 collapsed it to 0x0 and the section rendered as an empty
   20px gap between the bug icon and the gear. */
.topnav > .user-chip .avatar {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    font-size: 11px;
    margin: 0;
}

/* The gear keeps its <details> behaviour and its popover; only its pill shell goes. */
.topnav .settings-menu > summary.settings-trigger {
    width: auto;
    height: auto;
    background: none;
    border: 0;
    border-radius: 0;
    transform: none;
}
.topnav .settings-menu > summary.settings-trigger:hover { transform: none; }

/* The gear is the one section whose glyph is NOT a direct child of a .topnav-seg-body:
   the component brings its own <details>/<summary> instead. The <details> box measures
   ~3px taller than the <summary>, and the summary sits at its TOP, so the gear rode
   1.3px above the row while every other icon centred exactly on the axis.

   Stretching the details AND the summary to the section's full height puts the glyph
   back on that axis, and it fixes a second thing on the way: the tap target used to be
   the 26px summary rather than the 47px section, which on a phone is the difference
   between hitting the gear and hitting nothing.

   The section's padding MOVES to the summary rather than just disappearing: zeroing it
   outright shrank the whole section to the 20px glyph on desktop, narrower than every
   neighbour. Same box as before, owned by the element that has to be tappable. */
.topnav > .topnav-seg-settings { padding: 0; }

.topnav > .topnav-seg-settings > .settings-menu {
    align-self: stretch;
    display: flex;
    flex: 1 1 auto;
}

.topnav .settings-menu > summary.settings-trigger {
    flex: 1 1 auto;
    align-self: stretch;
    justify-content: center;
    padding: 6px 11px;
}

/* v0.8.3.2: settings and sign-out carry drawn PNGs too, so every glyph in the strip
   is a .topnav-icon and there are no Material font glyphs left here to size. */

/* Sign-out keeps its warning tint - it is the one section here you do not want to
   hit by accident. */
.topnav > .logout-btn:hover { color: var(--chronos-red); transform: none; }

/* ---- phones: BIGGER, not smaller ---------------------------------------------
   The chip era hid the Store entry outright below 400px, because four fat capsules
   with their own borders and margins could not share a 375px bar. Nothing is
   dropped here - the store is a first-class destination and hiding it on the
   platform most of the users are on was the wrong trade.

   And the sections are grown by about half again rather than shrunk, because these
   are the only finger targets in the top bar. The room is real, not borrowed: at
   375px the icon cluster has already wrapped onto a line of its own (the graceful
   degradation in 02-main-layout.css) where it needs 232 of 355px, so ~120px sit
   unused to its left. Measured, not guessed - re-measure before growing further.

   About 1.5x in both directions: a section goes from 27x26 to a square 40x40, which
   is a real thumb target rather than a 26px sliver. The padding is also what
   separates one section from the next, since the dividers are borders on the panels
   rather than a flex gap - so widening it does both jobs at once.                 */
@media (max-width: 720px) {
    /* Full width: the strip takes a row of its own and the sections split it evenly,
       so every target is as wide as the screen allows instead of huddling at the
       right edge. .topbar-right normally right-packs with margin-left:auto
       (02-main-layout.css); here it spans instead. */
    .topbar-right {
        width: 100%;
        margin-left: 0;
    }

    /* The skewed plate leans out by height*tan(12deg) - ~10px at 44px tall - and the
       inline margin is what keeps those points on screen. */
    .topnav {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 10px;
    }

    /* Equal shares of the row. Safe to let these flex here, unlike on desktop: there
       are no labels on a phone, so there is no text for flex to squeeze away. */
    .topnav-seg {
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 0;
    }

    /* 9 + 26 + 9 = 44px tall, the size a thumb actually hits, and a glyph you can
       read at arm's length rather than a 20px smudge. */
    .topnav-icon { width: 26px; height: 26px; }


    /* The gear's padding lives on its summary (see the utility block above), so the
       phone override has to go there too - 9 + 26 + 9 matches the other sections. */
    .topnav .settings-menu > summary.settings-trigger { padding: 9px 0; }

    .topnav > .user-chip .avatar {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }
}

/* ---- pointer, above the phone breakpoint -------------------------------------
   The hover growth lives here. Labels do NOT - see the 1024px block below: between
   721 and 1023 the top bar still has to fit the centred Upgrade CTA, the avatar
   chip, the settings gear and sign-out, and four labelled sections push the cluster
   off the edge. Icon-only up to there, with the tint and the growth doing the work. */
@media (min-width: 721px) {
    .topnav { margin: 0 8px; }
    /* v0.8.3.2: roomier than the phone. There is horizontal space to spare between the
       centred Upgrade CTA and the right edge, and a section that reads as a target
       beats one squeezed to its glyph. */
    .topnav-seg { padding: 6px 14px; }
    .topnav .settings-menu > summary.settings-trigger { padding: 6px 14px; }

    /* Pointer devices only. A touch screen reports hover: none, and there the
       :hover state would stick after a tap - a section left permanently widened. */
    @media (hover: hover) {
        /* Raised so the widened panel covers its neighbours' dividers instead of
           sliding under them. */
        .topnav-seg:hover { z-index: 2; }

        .topnav-seg:hover::before,
        .topnav-seg:focus-visible::before {
            /* Horizontal only: the plate's top and bottom edges stay put, so the
               strip keeps its silhouette while the section claims room sideways. */
            inset: 0 -10px;
        }

        /* The end sections grow INWARD only. There is no overflow clip to catch them
           (see .topnav), and a tint spilling past the plate's pointed end would draw a
           slanted flap floating outside the strip. */
        .topnav-seg:first-child:hover::before,
        .topnav-seg:first-child:focus-visible::before { inset: 0 -10px 0 0; }

        .topnav-seg:last-child:hover::before,
        .topnav-seg:last-child:focus-visible::before { inset: 0 0 0 -10px; }

    }

    /* Keyboard focus gets the tint even on a touch device, where the block above
       does not apply - but no growth, so nothing can be left stuck open. */
    .topnav-seg:focus-visible::before { background: rgba(255, 215, 0, 0.16); }
}

/* ---- wide screens: the labels come out -----------------------------------------
   Static, never animated: their width is baked into the layout once at this
   breakpoint and never changes again, so hovering still moves nothing. 1024px is
   where four labelled sections plus the centred CTA plus the icon cluster measurably
   fit - at 800px they did not, and the cluster ran off the right edge.             */
@media (min-width: 1024px) {
    .topnav-seg { padding: 6px 20px; }
    .topnav .settings-menu > summary.settings-trigger { padding: 6px 20px; }

    .topnav-label {
        display: inline;
        padding-left: 8px;
        white-space: nowrap;
        /* Inherited from .topnav-seg: Inter, 500, 13px, no tracking - the same register
           as the horizon tabs below the bar. Nothing to restate here. */
    }
}

/* ---- the hover itself --------------------------------------------------------
   v0.8.3.2: gated on the POINTER, not on the width. A 700px-wide desktop window
   still has a mouse and deserves feedback; the section WIDENING stays behind the
   721px gate above, because on a phone-shaped viewport that is the motion the owner
   asked not to have. Everything below is paint-only - a tint, a rule, a glow and a
   1px nudge on the glyph via transform, none of which can move a neighbour.

   The old version was a flat 16% gold wash and nothing else, which on a lavender
   plate is very nearly invisible - which is why it read as "there is no hover".  */
@media (hover: hover) {
    .topnav-seg:hover::before,
    .topnav-seg:focus-visible::before {
        /* Confident, not tentative: the wash runs to 55% gold at the bottom and the
           rule under it is opaque. The first pass was a flat 16% and read as nothing
           on a lavender plate. */
        background: linear-gradient(180deg, rgba(255, 215, 0, 0.22), rgba(255, 215, 0, 0.55));
        box-shadow: inset 0 -3px 0 #FFD700;
    }

    /* transform, not width: scaling the painted glyph cannot move a neighbour, where
       a width change would relayout the whole strip on every pointer move. ~1.15 is
       the 15% the owner asked for, with a 1px lift so it reads as coming forward. */
    .topnav-seg:hover .topnav-icon,
    .topnav-seg:hover .avatar,
    .topnav-seg:focus-visible .topnav-icon,
    .topnav-seg:focus-visible .avatar {
        transform: translateY(-1px) scale(1.15);
        filter: drop-shadow(0 0 7px rgba(255, 215, 0, 0.75));
    }

    .topnav-seg:hover .topnav-label,
    .topnav-seg:focus-visible .topnav-label { color: #FFFBEA; }

    .topnav-icon,
    .topnav-seg .avatar { transition: transform 0.16s ease-out, filter 0.16s ease-out; }

    .topnav-label { transition: color 0.16s ease-out; }
}

/* Respect a reduced-motion preference: the tint and the rule still say "this one",
   nothing travels. */
@media (prefers-reduced-motion: reduce) {
    .topnav-seg::before { transition: background 0.18s ease-out, box-shadow 0.18s ease-out; }
    .topnav-icon,
    .topnav-seg .avatar { transition: none; }
    /* The glyph still grows - that is the signal, not the motion - it just does not
       travel to get there. */
    .topnav-seg:hover .topnav-icon,
    .topnav-seg:hover .avatar { transform: scale(1.15); }
}