/* Mega-menu skin — the presentation layer for Components/Layout/SiteHeader.razor.

   Written as hand-authored CSS rather than Tailwind utilities on purpose: the
   public site is served by the prebuilt Tailwind bundle in wwwroot/_next, which
   was compiled against the old React markup. Any class that bundle does not
   already contain — an arbitrary value, an unused shade — silently resolves to
   nothing, so a redesign expressed in new utilities would render half-styled.
   This file is linked from App.razor after the bundle and is unlayered, so it
   also wins over the Tailwind utilities still on these elements.

   Global, not scoped. Every selector is therefore either qnav- prefixed or a
   descendant of one, so nothing here can reach markup outside the header.
   Doubled classes (.qnav-chip.qnav-chip svg) are deliberate: they hold the
   specificity the old [b-xxxxx] scope attribute used to supply.

   Only presentation lives here. The menu tree, the links and the open/close
   behaviour are unchanged. */

/* ---------------------------------------------------------------- palette */

/* Brand colours. Declared on the header rather than :root so they stay this
   component's own, and matched on .qnav-root rather than the bare `header`
   element so an unrelated <header> elsewhere on the site cannot pick them up.
   Every element below is a descendant of this header, including the
   fixed-position panel and the mobile drawer, so they inherit to all of them. */
.qnav-root {
    --qh-magenta: #a03cd2;   /* PANTONE 2592C */
    --qh-indigo: #5d5de2;    /* PANTONE 2725C — primary */
    --qh-yellow: #f6cd46;    /* PANTONE 129C — accent, sparing */
    --qh-gradient: linear-gradient(135deg, #a03cd2 0%, #5d5de2 100%);

    /* Two points inside the signature gradient, named because several steps
       below need a colour rather than the ramp: the violet a third of the way
       along, and the purple two thirds along. */
    --qh-violet: #7a4ddd;
    --qh-purple: #9040d6;

    /* Indigo darkened to 6.5:1 on white: the brand indigo itself is 5:1, fine
       for the 13px link titles but thin for the 11px descriptions. */
    --qh-ink: #4f4fc0;
    --qh-tint: #f2f2fd;
    --qh-edge: #d7d7f8;
    --qh-shadow: 126, 79, 218;   /* mid-ramp, for rgba() elevation */
}

/* The brand palette, and only the brand palette: the signature gradient,
   magenta, indigo, yellow. AccentClass cycles c0-c3 by column position, so a
   four-group flat menu shows all four swatches across the panel.

   Every surface stays light — white panel, near-white row washes, tints mixed
   at a few per cent. The colour is carried by chips, rules and titles, never by
   a filled background.

   Four roles rather than one accent, because yellow cannot do every job the
   purples can — at 1.7:1 on white it is invisible as text and nearly so under
   a white glyph:

     --qnav-accent      solid fill: tab bar, solid chip, spine, shadow tint
     --qnav-accent-bg   same, where a gradient is allowed (defaults to accent)
     --qnav-glyph       accent as a foreground on a light tint (>=3:1)
     --qnav-ink         accent as text on white (>=4.5:1)
     --qnav-solid       the fill a white glyph sits on (>=3:1 against white)
     --qnav-on-accent   foreground on top of that fill
     --qnav-tint        hover fill under a row
     --qnav-wash        a step below the tint, the rows' rest state

   --qnav-wash has to stay below --qnav-tint: the rows cannot sit on the hover
   fill at rest, or hovering one would do nothing. */

.qnav-c0,
.qnav-c1,
.qnav-c2,
.qnav-c3 {
    --qnav-accent-bg: var(--qnav-accent);
    --qnav-glyph: var(--qnav-accent);
    --qnav-on-accent: #fff;

    /* The filled-chip step, matching --qnav-solid on the .qnav-h* ramp so the
       shared row design (see .qnav-item) resolves the same custom property in
       either layout. --qnav-ink is already this accent taken to 4.5:1 on white,
       which is exactly what a white glyph on the accent needs. */
    --qnav-solid: var(--qnav-ink);
}

/* Signature gradient — the swatch's own 135deg, so the solid chip and the tab
   bar carry the real brand ramp. --qnav-accent is its midpoint, for the slots
   that cannot take a gradient (box-shadow colour, the flat spine). */
.qnav-c0 {
    --qnav-accent: var(--qh-violet);
    --qnav-accent-bg: var(--qh-gradient);
    --qnav-ink: #5b3fc6;
    --qnav-tint: #f3f0fd;
    --qnav-wash: #fbfaff;
    --qnav-edge: #dcd4f8;
}

.qnav-c1 {
    --qnav-accent: var(--qh-magenta);
    --qnav-ink: #8833b3;
    --qnav-tint: #f7effb;
    --qnav-wash: #fdfaff;
    --qnav-edge: #e7cef4;
}

.qnav-c2 {
    --qnav-accent: var(--qh-indigo);
    --qnav-ink: #4f4fc0;
    --qnav-tint: #f2f2fd;
    --qnav-wash: #fafaff;
    --qnav-edge: #d7d7f8;
}

/* Yellow is the one column that needs all four roles to differ. The bar and
   the chip stay the true PANTONE 129C; the title drops to a dark amber and
   the chip's glyph inverts to near-black, which is the only way this column
   is legible rather than merely yellow. */
.qnav-c3 {
    --qnav-accent: var(--qh-yellow);
    --qnav-glyph: #a07c00;
    --qnav-ink: #8a6a00;
    --qnav-tint: #fef8e3;
    --qnav-wash: #fffdf3;
    --qnav-edge: #fceebe;
    --qnav-on-accent: #4a3800;
}

/* The grouped (Products, Solutions) panel runs the same four swatches as the
   flat panel above, in the palette's own order: signature gradient, magenta,
   indigo, yellow. The two panel types finally agree — a visitor moving from
   Products to Solutions sees one system rather than two.

   It used to be a five-step hue ramp — indigo, violet, pink, green, amber — and
   the green and the amber are not brand colours at all.

   Unlike the .qnav-c* accents above, which recolour a whole card, a step here
   mostly paints an icon chip: a tint behind a glyph, so --qnav-glyph only has to
   clear 3:1 for a 17px stroke. --qnav-solid is the exception and the reason each
   step needs two values — it fills the heading chip and colours the heading
   title, so it has to clear 4.5:1 on white.

   HueClass applies the swatch by rail position: the rail item declares it, and
   the detail pane beside it is given the selected item's, so a group and the
   pages it opens are one colour. */

/* Signature gradient's midpoint violet, which is the one colour on the ramp a
   hairline or a 17px glyph can actually be. */
.qnav-h0 {
    --qnav-tint: #f3f0fd;
    --qnav-glyph: var(--qh-violet);
    --qnav-solid: #5b3fc6;
    --qnav-edge: #dcd4f8;
}

.qnav-h1 {
    --qnav-tint: #f9effc;
    --qnav-glyph: var(--qh-magenta);
    --qnav-solid: #8833b3;
    --qnav-edge: #ecd3f6;
}

.qnav-h2 {
    --qnav-tint: #eeeffe;
    --qnav-glyph: var(--qh-indigo);
    --qnav-solid: #4f4fc0;
    --qnav-edge: #d9dafa;
}

/* Yellow, the swatch that cannot play any of these roles at face value: at
   1.7:1 on white it is invisible as a title and as a 17px glyph. The column runs
   on dark amber instead, and the true PANTONE 129C appears in exactly one place
   — the heading chip below — which is what "sparing" means here. */
.qnav-h3 {
    --qnav-tint: #fef8e3;
    --qnav-glyph: #a07c00;
    --qnav-solid: #8a6a00;
    --qnav-edge: #fceebe;
}

/* Only reached by a fifth group: the gradient's midpoint, which is the one
   further point on the brand ramp that is not already a column above. */
.qnav-h4 {
    --qnav-tint: #f6ecfc;
    --qnav-glyph: var(--qh-purple);
    --qnav-solid: #7e35bd;
    --qnav-edge: #e6d2f6;
}

/* --------------------------------------------------------- top-level tabs */

.qnav-bar {
    align-self: stretch;
}

.qnav-tab {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.qnav-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.6875rem 1rem;
    border-radius: 0.625rem;
    font-size:1rem;
    font-weight: 600;
    color: #3f4658;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    transition: color .18s ease, background-color .18s ease;
}

.qnav-trigger:hover {
    color: var(--qh-ink);
    background: var(--qh-tint);
}

/* Open tab: tinted panel plus the accent rule along its bottom edge. */
.qnav-trigger.is-open,
.qnav-trigger.is-open:hover {
    color: var(--qh-ink);
    background: var(--qh-tint);
}

/* The rule is on every trigger now, not just the open one, so it can grow
   rather than appear. Drawn at zero width and scaled out from the centre: a
   3px bar that pops in at full length reads as a state change, one that opens
   under the label reads as the tab reaching for the panel below it. */
.qnav-trigger::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    /* 90deg rather than the signature 135deg: on a 3px rule a diagonal ramp
       resolves to a single flat colour. */
    background: linear-gradient(90deg, var(--qh-magenta), var(--qh-indigo));
    transform: scaleX(0);
    transition: transform .2s ease, opacity .2s ease;
}

/* Hover shows the same bar at half strength — the tab acknowledging the
   pointer without claiming to be the open one. Pricing has no panel to open,
   so this is the only state it ever gets. */
.qnav-trigger:hover::after {
    opacity: .45;
    transform: scaleX(1);
}

.qnav-trigger.is-open::after,
.qnav-trigger.is-open:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/* The tab is the panel's own handle, so a caret ring around it would sit
   between the label and the bar it draws. The bar plus the tint is the focus
   state; the ring only fills in where those are not enough. */
.qnav-trigger:focus-visible {
    outline: 2px solid var(--qh-indigo);
    outline-offset: -2px;
    color: var(--qh-ink);
    background: var(--qh-tint);
}

.qnav-trigger:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.qnav-chevron {
    width: 0.875rem;
    height: 0.875rem;
    opacity: .65;
    transition: transform .2s ease, opacity .2s ease;
}

.qnav-trigger:hover .qnav-chevron {
    opacity: .85;
}

.qnav-trigger.is-open .qnav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* -------------------------------------------------------- header buttons */

/* The outlined half of the pair. It used to be drawn in grey on grey, which read
   as a disabled control beside the filled trial button; in the brand violet it
   reads as the second of two things you can do here. Same radius and the same
   type as .qnav-cta below, so the two are one component in two weights.

   The border is 1.5px rather than 1: at 1px a violet outline against white is
   thin enough to look like a focus ring rather than an edge. */
/* The block padding is a pixel under .qnav-cta's to pay for the 1.5px border, so
   the two buttons stand the same height. */
.qnav-login {
    padding: 0.5rem 1.375rem;
    border: 1.5px solid var(--qh-violet);
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--qh-violet);
    background: #fff;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease,
                background-color .18s ease, box-shadow .18s ease;
}

/* Fills with the lightest tint rather than inverting: a solid violet hover would
   make this the same button as Start Free Trial for as long as the pointer sat
   on it. The ink step is the same violet at 6.5:1, so the label gets darker as
   the ground gets lighter. */
.qnav-login:hover {
    color: var(--qh-ink);
    border-color: var(--qh-ink);
    background: var(--qh-tint);
    box-shadow: 0 4px 12px -6px rgba(var(--qh-shadow), .35);
}

.qnav-login:focus-visible {
    outline: 2px solid var(--qh-ink);
    outline-offset: 2px;
}

.qnav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5625rem 1.125rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: var(--qh-gradient);
    box-shadow: 0 8px 18px -8px rgba(var(--qh-shadow), .6);
    transition: box-shadow .2s ease, transform .2s ease;
}

.qnav-cta:hover {
    box-shadow: 0 12px 24px -8px rgba(var(--qh-shadow), .7);
    transform: translateY(-1px);
}

/* White, with the label rather than in the accent. The arrow is not a second
   thing on the button — it is the last character of "Start Free Trial", and in
   yellow it read as a mark of its own. */
.qnav-cta svg {
    width: 1rem;
    height: 1rem;
    color: #fff;
}

/* ---------------------------------------------------------------- panel */

/* Full-bleed band flush under the header — 81px is the md:h-20 row plus its
   1px border. The tinted fill spans edge to edge; only the content inside is
   constrained, so the panel still reads as part of the header bar. */
.qnav-shell {
    position: fixed;
    top: 81px;
    left: 0;
    right: 0;
    z-index: 50;
}

/* A full-bleed band flush under the header. The white fill spans the viewport;
   .qnav-body centres the content inside it, and the rail's tint carries on out
   to the left edge (see .qnav-rail) so the band reads as one sheet rather than
   as a panel with a block sitting in it.

   Also what clips that bleed — overflow stays hidden. */
.qnav-panel {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
    /* Two-stop shadow rather than one: the tight stop draws the seam where the
       panel meets the page, the wide one is the weight that makes it read as a
       sheet in front of the content rather than a band drawn on it. */
    box-shadow: 0 1px 0 #ece8f7,
                0 24px 48px -20px rgba(28, 26, 74, .3);
    animation: qnav-drop .18s ease-out;
}

/* The brand ramp closing the bottom edge, in place of a flat lilac border.
   Full-bleed like the panel, and the one place the whole 135deg gradient runs at
   viewport width — the open tab above draws a 90deg slice of the same ramp, so
   the two are visibly one mark. Held at half strength so it edges the light
   panel rather than boxing it in. */
.qnav-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--qh-gradient);
    opacity: .5;
}

@keyframes qnav-drop {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* The scrolling part of the sheet — everything except the promo band, which is
   pinned below it.

   Its width and gutter are boxed-container's, from the bundle: the element
   carries both classes, and this rule deliberately declares neither, so the menu
   lines up with the header row at every one of that class's six breakpoints
   rather than at a width guessed here. */
.qnav-body {
    position: relative;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    /* Scrolls, but never draws a bar for it.

       A short laptop is where a long menu overflows, and the bar it drew ran
       down the right-hand edge of the sheet — through the content column, past
       the promo band, in a panel a visitor is only passing through on the way to
       a link. Styling it thin and brand-tinted made it a neater thing that
       should not have been there.

       There is also no stable gutter: it was reserved whether or not the menu
       scrolled, and it came out of this box's content width — the content column
       — so it held the last row ten pixels short of Start Free Trial on every
       menu to pay for a bar that is now never painted. The wheel, the trackpad
       and the keyboard all still scroll this box. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.qnav-body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* ------------------------------------------------------------------- rail */

/* The grouped panel is a rail of groups with one group's pages beside it.

   It used to be four columns with all four groups printed at once. Every module
   page carries a two-sentence menu_desc, and a quarter of the panel gave each
   row about 300px to say it in: four lines of 13px text, seventeen rows deep,
   and a sheet taller than a laptop. One group at a time is the same content at
   half the height, with each description on two lines. */
.qnav-split {
    display: grid;
    grid-template-columns:23rem minmax(0, 1fr);
    align-items: stretch;
}

/* The rail is the panel's one tinted surface, which is what makes it read as a
   list of choices rather than as a first column of links. */
/* No horizontal padding: the content column starts at the logo, and the rail is
   the first thing in it, so its rows have to start there too rather than a
   gutter further in. The rows carry their own padding. */
.qnav-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 1rem 15px;
    /* A wash down its length rather than one flat tint: at 292px by 450px a
       single fill is a slab, and the gradient gives the rail a top without
       drawing a line across it. */
    background: linear-gradient(180deg, #f9f8fe 0%, #fdfcff 100%);
    border-right: 1px solid #efeef8;
}

/* The band spans the viewport but its content sits in boxed-container, so on any
   screen the rail would be a tinted block with white to the left of it — a panel
   inside a panel. This carries the same fill out past the content column;
   .qnav-panel's overflow clips it at the viewport edge. */
.qnav-rail::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100vw;    
}

/* A heading that is also a control. It carries the same three things the column
   heading carried — the group's icon, its title, and the sentence saying what
   the group is collectively for — in a third of the width. */
.qnav-rail-item {
    position: relative;
    display: flex;
    /* Centred, not top-aligned: the count sits at the far end of the row, and
       against a two-line blurb a top-aligned number hangs off the title. */
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.875rem;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .16s ease, box-shadow .16s ease;
}

.qnav-rail-item:hover {
    background: #f3f1fc;
}

/* The selected item is a white card lifted off the tint: the sheet's own surface
   arriving under the row whose pages are showing, so the rail and the pane
   beside it read as one plane. Nothing else in the panel is raised. */
.qnav-rail-item[aria-selected="true"] {
    background: #fff;
    border-color: #ecebf8;
    box-shadow: 0 1px 2px rgba(28, 26, 74, .06),
                0 4px 10px -22px rgba(125, 79, 218, 0.49);
}

/* The spine, and the rule under the pane's heading, are the pairing: one mark at
   each end of it, in the same hue. Position alone said which group was open —
   true, but only if you already knew the pane belonged to the rail. */
.qnav-rail-item[aria-selected="true"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7rem;
    bottom: 0.7rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--qnav-glyph), var(--qnav-solid));
}

/* Filled rather than tinted once selected — the same inversion the rows do on
   hover, and the only solid block of colour left in the panel. The fill is the
   hue's own 135deg ramp rather than one flat step, so it carries the diagonal
   the brand gradient does at a size where a diagonal still resolves. */
.qnav-rail-item[aria-selected="true"] .qnav-chip {
    background: linear-gradient(135deg, var(--qnav-glyph), var(--qnav-solid));
    color: #fff;
    box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--qnav-solid) 60%, transparent);
}

/* --qnav-solid, not --qnav-glyph: the glyph step is a 17px stroke on a tint, and
   three of the five steps sit under 4.5:1 on white as 15px text. */
.qnav-rail-item[aria-selected="true"] .qnav-rail-title {
    color: var(--qnav-solid);
}

.qnav-rail-item:focus-visible {
    outline: 2px solid var(--qnav-glyph);
    outline-offset: -2px;
}

.qnav-rail-text {
    min-width: 0;
}

/* How many pages the group holds. Tabular figures so the column of numbers down
   the rail lines up, and quiet enough at rest that it is read second — it
   answers "is this worth opening", not "what is this". */
.qnav-rail-count {
    flex: none;
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #b0abcd;
    transition: color .16s ease;
}

.qnav-rail-item[aria-selected="true"] .qnav-rail-count {
    color: var(--qnav-glyph);
}

.qnav-rail-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #1f2533;
    transition: color .16s ease;
}

.qnav-rail-desc {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #6b7280;
}

/* ----------------------------------------------------------------- detail */

/* The right pad is the grid's own negative margin cancelled, so the last column's
   rows end on the content column's edge — under Start Free Trial — rather than a
   gutter short of it. */
.qnav-detail {
    padding: 1.375rem 0.625rem 1.25rem 1.5rem;
    /* The rail is taller than a two-page group, and without a floor the sheet
       would resize under the pointer as it moves down the rail. */
    min-height: 20.5rem;
    /* Moving down the rail replaces a paneful of text between one frame and the
       next, which reads as a flicker rather than as a change. Four pixels and a
       sixth of a second is enough to say the pane turned over. Keyed markup is
       what re-runs this — see the @key in SiteHeader.razor. */
    animation: qnav-pane-in .16s ease-out;
}

@keyframes qnav-pane-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

/* Which menu these pages came from. The pane is half the panel and the tab that
   opened it is eighty pixels away above the rail, so the heading says the menu
   before it says the group. In the group's hue, which nothing else in the pane
   takes. */
.qnav-eyebrow {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--qnav-solid);
}

.qnav-detail-head {
    margin-bottom: 0.875rem;
}

/* The other half of the pairing the rail's spine starts: the same hue, fading
   out, closing the heading off from the pages under it. */
.qnav-detail-head::after {
    content: "";
    display: block;
    width: 2.25rem;
    height: 2px;
    margin-top: 0.7rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--qnav-glyph), transparent);
}

/* Repeats the selected rail item's title on purpose: the pane has to say whose
   pages it is showing without the visitor tracking back across the rule. Ink
   rather than the group's hue, which the rail item beside it is already
   carrying. */
.qnav-detail-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #1f2533;
}

.qnav-detail-desc {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #6b7280;
}

/* As many tracks as the pane can give 21rem each, filled row-major: one on a
   narrow laptop, two by about 1100px, four on a wide monitor. 21rem is the width
   at which a two-sentence menu_desc sets in two or three lines rather than four —
   the number the old fixed four columns could not hold to once the panel had to
   fit any viewport.

   auto-fill, not auto-fit: a two-page group leaves the empty tracks empty
   instead of stretching its two rows across the whole pane.

   Pulled out to the pane's padding edge, as the columns' lists were, so a row's
   hover fill spans the track instead of leaving a stripe of white down it. */
.qnav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
    column-gap: 1.5rem;
    row-gap: 0.125rem;
    align-items: start;
    margin: 0 -0.625rem;
}

/* An empty square at rest, filled in the group's hue under the pointer.

   Tinting all of them at once is what the rail was meant to end: two columns of
   tinted squares beside a tinted rail is three tinted things across the panel.
   One of them, on the row being read, is not noise — it is the row answering. */
.qnav-item-chip {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-top: -0.125rem;
    border-radius: 0.625rem;
    background: transparent;
    color: #a8a4c4;
    transition: background-color .16s ease, color .16s ease;
}

.qnav-item:hover .qnav-item-chip,
.qnav-item:focus-visible .qnav-item-chip {
    /* Mixed rather than the ramp's own tint: --qnav-tint is also the row's hover
       fill, so a chip painted with it would vanish into the row. */
    background: color-mix(in srgb, var(--qnav-glyph) 13%, #fff);
    color: var(--qnav-glyph);
}

.qnav-item-icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: inherit;
}

/* The spine belongs to a single column of rows, where it marks which one of
   sixteen is being read. Six rows in two tracks do not need it, and in the
   second track it would draw down the middle of the pane. */
.qnav-detail .qnav-item::before {
    display: none;
}

/* ------------------------------------------------------------- promo band */

/* One sentence about the menu above it and one link out of it, across the foot
   of the sheet. It sits outside .qnav-body so a scrolling menu cannot push it
   away, and only menus that have something to say here get one — see
   Infrastructure/MenuPromo.cs. */
/* The wash spans the band; the sentence inside it is held to the content column
   by boxed-container on .qnav-promo-inner, so it starts under the logo. */
.qnav-promo {
    padding: 0.875rem 0;
    /* The lightest wash in the panel, and the only horizontal one: it closes the
       sheet off without competing with the rail above it. */
    background: linear-gradient(90deg, #f5f2ff 0%, #fbfaff 60%);
    border-top: 1px solid #eeecf9;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #5b6479;
}

.qnav-promo-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* A tile, so the band opens on something rather than starting mid-sentence
   against the rail's edge. White on the wash, which makes it the one raised
   thing at the foot of the sheet. */
.qnav-promo-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    background: #fff;
    color: var(--qh-ink);
    box-shadow: 0 1px 2px rgba(28, 26, 74, .08);
}

.qnav-promo-icon svg {
    width: 1rem;
    height: 1rem;
}

.qnav-promo-text {
    min-width: 0;
    /* Holds the sentence beside the tile. The band is space-between, so without
       this the text centres itself between the tile and the button. */
    margin-right: auto;
}

.qnav-promo-lead {
    font-weight: 600;
    color: #1f2533;
}

/* A button, not a link that happens to end a sentence: it is the only thing in
   the panel a visitor is asked to press rather than to read. */
.qnav-promo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: none;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    background: #fff;
    font-weight: 600;
    color: var(--qh-ink);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(28, 26, 74, .08),
                0 10px 20px -14px rgba(126, 79, 218, .9);
    transition: box-shadow .16s ease;
}

.qnav-promo-link:hover {
    box-shadow: 0 1px 2px rgba(28, 26, 74, .1),
                0 14px 24px -14px rgba(126, 79, 218, .95);
}

.qnav-promo-link svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform .16s ease;
}

.qnav-promo-link:hover svg {
    transform: translateX(2px);
}

.qnav-promo-link:focus-visible {
    outline: 2px solid var(--qh-indigo);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Carried by the rail items and by the flat panel's rows. Both declare their own
   hue — HueClass on a rail item, AccentClass on a flat row — so the chip only
   ever reads the step it inherits. */
.qnav-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.6875rem;
    background: var(--qnav-tint);
    color: var(--qnav-glyph);
    /* Hairline in the chip's own hue, drawn inside so it costs no layout. At
       rest it is nearly invisible against the tint; once the row hover fills
       the chip it is the only thing keeping the glyph from floating. */
    box-shadow: inset 0 0 0 1px var(--qnav-edge, transparent);
    transition: background-color .18s ease, box-shadow .18s ease,
                color .18s ease, transform .18s ease;
}

.qnav-chip.qnav-chip svg {
    width: 1.0625rem;
    height: 1.0625rem;
}

/* ------------------------------------------------------------------ items */

/* One row design for both layouts. The flat menus — Resources, Solutions,
   Company — used to be a grid of bordered cards, which meant the site had two
   mega-menus that shared a palette and nothing else: a visitor moving from
   Products to Resources landed on a different component. The row below is the
   Products row, and the two layouts now differ only in how they arrange it,
   which is the one thing their content actually forces.

   Borderless and unfilled at rest. In a column that already sits between two
   hairline rules, boxing every row framed the panel three deep — a rule, a card
   border, and the chip's own edge — and the wash under each row turned four
   columns into sixteen faintly tinted blocks. The row has one job at rest:
   carry a chip, a title and a description. Everything else arrives on hover.

   Top-aligned, because a three-line description would otherwise centre the chip
   against the middle of the paragraph instead of the title. */
.qnav-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.625rem 0.625rem 0.625rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.625rem;
    background: transparent;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease,
                box-shadow .18s ease, transform .18s ease;
}

/* Nudged down a hair so a 36px chip squares against a 15px title rather than
   against the top of its line box. */
.qnav-item .qnav-chip {
    margin-top: 0.0625rem;
}

/* The spine replaces the old translateX nudge. Sliding the whole row sideways
   moved the chip out of the column's icon rail, so four hovered rows never
   lined up with the twelve resting ones; a mark that grows in place says the
   same thing without disturbing the grid. Scaled from the centre, so it opens
   out of the row's midline rather than dropping in from the top. */
.qnav-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4375rem;
    bottom: 0.4375rem;
    width: 2px;
    border-radius: 999px;
    background: var(--qnav-glyph);
    opacity: 0;
    transform: scaleY(.35);
    transition: opacity .18s ease, transform .18s ease;
}

.qnav-item:hover::before,
.qnav-item:focus-visible::before {
    opacity: 1;
    transform: none;
}

/* Flat fill, no lift: these rows sit close together, and a drop shadow on one
   would fall across the two below it. */
.qnav-item:hover,
.qnav-item:focus-visible {
    background: var(--qnav-tint);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

/* The chip inverts on hover — tint fill under a coloured glyph becomes the
   solid fill under a white one, which is the heading chip's treatment arriving
   on the row being read. It is the strongest hover state in the panel and only
   ever appears once at a time. */
.qnav-item:hover .qnav-chip,
.qnav-item:focus-visible .qnav-chip {
    /* Flat colour, not the heading's gradient: a gradient is a background-image
       and cannot be transitioned, so it would snap in while the row tint behind
       it faded. One colour and the whole state moves together.

       The solid step rather than the glyph step, because this is now white on
       the hue rather than the hue on white — the amber and green glyph values
       carry a 19px stroke at 3:1 against a tint, but not a white one. */
    background: var(--qnav-solid);
    color: #fff;
    box-shadow: 0 6px 12px -6px color-mix(in srgb,
                                          var(--qnav-solid) 55%,
                                          transparent);
    transform: scale(1.04);
}

/* Keyboard focus draws the hover state above, which is fill only — fine for a
   pointer, not enough to find a caret with. The ring is the column's own hue,
   so tabbing down a column tracks the same colour its chips do. */
.qnav-item:focus-visible {
    outline: 2px solid var(--qnav-glyph);
    outline-offset: -2px;
}

.qnav-item-text {
    min-width: 0;
    flex: 1 1 auto;
}

/* Sits over two or three lines of description and has to hold rank against
   them, which is why it is heavier than a card title would need to be. */
.qnav-item-title {
    display: block;
    font-size: .85rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.005em;
    color: #1f2533;
    transition: color .18s ease;
}

/* The row hue is an icon colour, never a text colour: three of the five steps
   (green, amber, pink) sit under 4.5:1 on their own tint at 15px. The solid
   step is each hue taken down until it clears that bar, so the hovered title
   shifts by the same amount in every column. */
.qnav-item:hover .qnav-item-title,
.qnav-item:focus-visible .qnav-item-title {
    color: var(--qnav-solid, var(--qh-ink));
}

/* A module name on its own — "Payroll", "Leave", "People" — tells a buyer
   nothing, so every row prints menu_desc under its title. 1.55 rather than a
   tighter leading because the difference between two lines and three is read
   as one block of text, and at 13px a tight leading closes it up. */
.qnav-item-desc {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #6b7280;
    transition: color .18s ease;
}

/* Grey enough to sit behind the title at rest, which is right for sixteen
   resting rows and a shade too quiet for the one being read. */
.qnav-item:hover .qnav-item-desc,
.qnav-item:focus-visible .qnav-item-desc {
    color: #5b6479;
}

/* Seventeen chevrons standing in a four-column panel is chrome this layout
   cannot afford, which is why they used to be hidden outright. One chevron, on
   the row under the pointer, is not chrome — it is the row confirming it is a
   link. So it is drawn, but only for the hovered or focused row, sliding in
   from where the text ends. Space is reserved at rest, so nothing reflows. */
.qnav-item-arrow {
    flex: none;
    align-self: center;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--qnav-glyph);
    opacity: 0;
    transform: translateX(-0.25rem);
    transition: opacity .18s ease, transform .18s ease, color .18s ease;
}

.qnav-item:hover .qnav-item-arrow,
.qnav-item:focus-visible .qnav-item-arrow {
    opacity: 1;
    transform: none;
}

/* --------------------------------------- flat panel (menus with no groups) */

/* This one keeps the panel's padding, since .qnav-body no longer carries any:
   the grouped layout's rail has to reach that box's edges, and a flat menu has
   no rail. */
.qnav-flat {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 1.5rem 0 1.75rem;
}

@media (max-width: 1279px) {
    .qnav-flat {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Nothing left to say about the row itself — it is the same row the grouped
   panel draws. What is left is the arrangement: a wide column gap and almost no
   row gap, so a menu of seven entries reads down its columns the way the
   grouped panel's pane does rather than across as a grid of tiles.

   AccentClass cycles four accents by source order and the grid fills row-major
   across four tracks, so index % 4 lands the same accent in the same column. */
.qnav-flat {
    column-gap: 2.5rem;
    row-gap: 0.25rem;
}

/* Grid items stretch by default, which on a row that is one line tall next to
   one that is four stretches the short row's hover fill to match. */
.qnav-flat .qnav-item {
    align-self: start;
}

/* ------------------------------------------------------------ illustration */

/* ------------------------------------------------------------ mobile menu */

/* The drawer is three bands: a search field, a scrolling list, and the two
   actions. Only the middle one moves.

   The closed state is declared unconditionally so it cannot fail open at any
   width. Everything that follows is wrapped in the md breakpoint's own boundary
   (48rem, the width Tailwind's md: uses): this file is unlayered and the
   bundle's utilities sit in @layer utilities, so a bare .qnav-drawer rule
   outranks the md:hidden on the same element, and a `display` on it would put
   the drawer on the desktop header. Inside the media query it cannot.

   The overflow is set here rather than by an overflow-hidden class in the markup
   because the bundle declares that utility twice and the second copy is
   `overflow: hidden !important` — an element carrying it can never be given a
   scrollbar again by any rule, at any specificity, inline styles included. */
.qnav-drawer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .3s ease-in-out, opacity .3s ease-in-out;
}

@media (max-width: 47.9375rem) {

    /* The hamburger, squared up to the 44px minimum. p-2 around a 24px glyph is
       40px, and this button is the entire mobile menu's handle. */
    .qnav-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* Bounded by the viewport, never by its content: the drawer lives inside a
       `sticky top-0` header, so anything past the fold is not merely below it —
       it is unreachable, because the header pins at y=0 the instant the page
       moves. On a 375x667 phone that hid 596px of an open Products section.

       dvh, not vh: on a phone `100vh` is the height with the browser chrome
       retracted, so a vh-sized drawer runs its last rows underneath the URL bar
       exactly when the bar is showing. The vh line above it is the fallback for
       engines without dvh.

       4rem is the mobile header row (h-16) — not the 80px of the md:h-20 row,
       which is not the row height at any width this drawer is visible at. */
    .qnav-drawer.is-open {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 4rem);
        max-height: calc(100dvh - 4rem);
        opacity: 1;
        border-top: 1px solid #f1f2f7;
    }

    /* ------------------------------------------------------------- search */

    .qnav-m-find {
        flex: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        height: 2.875rem;
        margin: 0.625rem 0.875rem 0.125rem;
        padding: 0 0.5rem 0 0.75rem;
        border: 1px solid var(--qh-edge);
        border-radius: 0.8125rem;
        background: #fafaff;
        color: #8b8fa6;
    }

    .qnav-m-find:focus-within {
        border-color: #b9b9f0;
        box-shadow: 0 0 0 3px rgba(93, 93, 226, .12);
    }

    .qnav-m-find > svg {
        flex: none;
        width: 1rem;
        height: 1rem;
    }

    .qnav-m-find input {
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        font: inherit;
        font-size: 0.875rem;
        color: #1f2533;
        outline: none;
    }

    .qnav-m-find input::placeholder {
        color: #8b8fa6;
    }

    /* The platform's own clear button is a grey X of the wrong size in the
       wrong place, and only WebKit draws one at all. */
    .qnav-m-find input::-webkit-search-cancel-button,
    .qnav-m-find input::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
    }

    .qnav-m-clear {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #8b8fa6;
        cursor: pointer;
    }

    .qnav-m-clear:hover,
    .qnav-m-clear:active {
        background: var(--qh-tint);
        color: var(--qh-ink);
    }

    .qnav-m-clear svg {
        width: 0.875rem;
        height: 0.875rem;
    }

    /* --------------------------------------------------------- the list */

    .qnav-m-scroll {
        flex: 1 1 auto;
        min-height: 0;
        padding: 0.375rem 0 0.625rem;
        overflow-x: hidden;
        overflow-y: auto;
        /* Reaching the end of the menu must not start scrolling the page behind
           it — on a list this long a thumb hits that boundary constantly. */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        /* Same thin brand-tinted bar the desktop panel uses, for the phones that
           draw a classic scrollbar rather than an overlay one. */
        scrollbar-width: thin;
        scrollbar-color: var(--qh-edge) transparent;
    }

    .qnav-m-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .qnav-m-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .qnav-m-scroll::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--qh-edge);
    }

    .qnav-m-empty {
        margin: 0;
        padding: 1.25rem 1.125rem;
        font-size: 0.8125rem;
        line-height: 1.6;
        color: #6b7280;
    }

    /* ------------------------------------------------------- the actions */

    /* Login and Start Free Trial were the last two rows after fifty-two links.
       Pinned to the floor of the drawer they are reachable from every state of
       it — the closed list, an open section, a search result. */
    .qnav-m-act {
        flex: none;
        display: flex;
        gap: 0.5rem;
        padding: 0.6875rem 0.875rem calc(0.6875rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #eef0f6;
        background: #fff;
        /* Barely there, and only when the list runs under it — enough to say the
           band is in front of the rows rather than the last of them. */
        box-shadow: 0 -10px 20px -18px rgba(28, 26, 74, .5);
    }

    .qnav-m-login,
    .qnav-m-trial {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4375rem;
        min-height: 44px;
        border-radius: 0.8125rem;
        font-size: 0.8125rem;
        font-weight: 650;
        text-decoration: none;
    }

    .qnav-m-login {
        flex: 0 0 34%;
        border: 1px solid var(--qh-edge);
        color: #3f4658;
        background: #fff;
    }

    .qnav-m-login:hover,
    .qnav-m-login:active {
        color: var(--qh-ink);
        border-color: #b9b9f0;
    }

    .qnav-m-trial {
        flex: 1 1 auto;
        color: #fff;
        background: var(--qh-gradient);
        box-shadow: 0 9px 18px -9px rgba(var(--qh-shadow), .8);
    }

    /* White with the label, as on the desktop button — this is the same control
       at a different width, and the two cannot disagree about their arrow. */
    .qnav-m-trial svg {
        width: 0.9375rem;
        height: 0.9375rem;
        color: #fff;
    }
}

/* ----------------------------------------------------------------- rows */

/* Outside the media query on purpose: none of this touches `display` on the
   drawer itself, and every selector below only exists inside a drawer that is
   already display:none above 48rem. */

.qnav-m-section + .qnav-m-section {
    margin-top: 0.125rem;
}

.qnav-m-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5625rem 0.875rem;
    border: 0;
    border-radius: 0.75rem;
    font-family: inherit;
    text-align: left;
    color: #3f4658;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}

.qnav-m-trigger:hover,
.qnav-m-trigger:active,
.qnav-m-trigger.is-open {
    color: var(--qh-ink);
    background: var(--qh-tint);
}

/* The open section and the four closed ones look alike on a phone, where the
   expanded children scroll past the trigger that opened them. The bar marks
   which one is open at the point a thumb is most likely to be looking — the
   left edge, at the top of the run of children below it. */
.qnav-m-trigger.is-open::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4375rem;
    bottom: 0.4375rem;
    width: 3px;
    border-radius: 999px;
    background: var(--qh-gradient);
}

.qnav-m-trigger:focus-visible {
    outline: 2px solid var(--qh-indigo);
    outline-offset: -2px;
}

.qnav-m-label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.qnav-m-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.005em;
}

/* What the desktop panel prints under every tab and the phone used to drop.
   Clamped rather than truncated at the source: several of these are a full
   marketing sentence, and two lines of it is the most a row can carry without
   the five sections no longer fitting a phone between the search field and the
   actions. */
.qnav-m-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
    color: #6b7280;
}

/* The icon chip, carried down from the desktop panel — the mega menu gives
   every row a glyph and the phone used to draw a 4px grey dot. Same NavIcon,
   same tint, two sizes: a section is 34px and a page under it is 28px, and the
   difference in size is what ranks them now that both have an icon. */
.qnav-m-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.6875rem;
    background: var(--qh-tint);
    color: var(--qh-ink);
    box-shadow: inset 0 0 0 1px var(--qh-edge);
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.qnav-m-chip.qnav-m-chip svg {
    width: 1rem;
    height: 1rem;
}

/* The open section's chip inverts to the brand ramp — the strongest mark in
   the drawer, and only ever on one row at a time. */
.qnav-m-trigger.is-open .qnav-m-chip {
    background: var(--qh-gradient);
    color: #fff;
    box-shadow: 0 7px 14px -8px rgba(var(--qh-shadow), .75);
}

.qnav-chevron {
    flex: none;
}

.qnav-m-trigger.is-open .qnav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* ------------------------------------------------------- an open section */

/* A rail down the left, continuing the bar on the trigger above: on a phone the
   whole drawer is one flat column of text, and the rail is what says these
   thirteen rows hang off that one heading rather than following it. */
.qnav-m-panel {
    position: relative;
    margin: 0.125rem 0 0.5rem 1.75rem;
    border-left: 1px solid var(--qh-edge);
    animation: qnav-m-open .2s ease-out;
}

@keyframes qnav-m-open {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.qnav-m-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0.875rem 0.375rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--qnav-ink);
}

.qnav-m-group::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--qnav-edge);
}

.qnav-m-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    /* 44px with the chip inside it — the smallest target a thumb hits reliably,
       and these sit in a stack of a dozen. */
    min-height: 44px;
    padding: 0.375rem 0.875rem 0.375rem 0.75rem;
    border-radius: 0.5rem;
    color: #4a5163;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
}

.qnav-m-link .qnav-m-chip {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: transparent;
    color: #8b8fa6;
    box-shadow: none;
}

.qnav-m-link .qnav-m-chip.qnav-m-chip svg {
    width: 0.9375rem;
    height: 0.9375rem;
}

.qnav-m-link .qnav-m-name {
    font-size: 0.8125rem;
    font-weight: 550;
}

/* A phone has no hover, so :active carries the same weight here that :hover
   does on the desktop panel — it is the only feedback between the tap and the
   next page painting. */
.qnav-m-link:hover,
.qnav-m-link:focus-visible,
.qnav-m-link:active {
    color: var(--qh-ink);
    background: var(--qh-tint);
}

.qnav-m-link:hover .qnav-m-chip,
.qnav-m-link:focus-visible .qnav-m-chip,
.qnav-m-link:active .qnav-m-chip {
    background: var(--qh-ink);
    color: #fff;
}

.qnav-m-link:focus-visible {
    outline: 2px solid var(--qh-indigo);
    outline-offset: -2px;
}

/* ----------------------------------------------------------- search hits */

/* A result is a row lifted out of the tree, so it carries the trail it came
   from — "Products · Pay & Reimburse". Without it, Payroll and Managed Payroll
   Services are two identical-looking rows. */
.qnav-m-link.is-result {
    align-items: center;
    gap: 0.6875rem;
    margin: 0 0.5rem;
    padding: 0.4375rem 0.75rem;
}

.qnav-m-link.is-result .qnav-m-chip {
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    background: var(--qh-tint);
    color: var(--qh-ink);
    box-shadow: inset 0 0 0 1px var(--qh-edge);
}

.qnav-m-link.is-result .qnav-m-sub {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    font-size: 0.6875rem;
    color: #8b8fa6;
}

/* ------------------------------------------------------------- motion */

/* The panel's motion is decoration — the drop, the spine growing, the chevron
   sliding in, the promo link's arrow. None of it carries meaning the colour and
   the fill do not already carry, so it all comes off for a visitor who asked
   for less of it. The hover states themselves stay; only the movement goes. */
@media (prefers-reduced-motion: reduce) {
    .qnav-panel,
    .qnav-detail,
    .qnav-m-panel {
        animation: none;
    }

    .qnav-promo-link svg {
        transition: none;
        transform: none;
    }

    .qnav-item::before,
    .qnav-item-arrow,
    .qnav-chip,
    .qnav-m-chip {
        transition-property: opacity, background-color, color;
        transform: none;
    }

    /* The drawer still opens and closes — that is a state change, not
       decoration — but it does it without the height animation. */
    .qnav-drawer {
        transition: none;
    }

    /* The tab rule keeps its state, drawn rather than animated — the bar fades
       in at full width instead of opening out from the centre. */
    .qnav-trigger::after {
        transition-property: opacity;
        transform: scaleX(1);
        opacity: 0;
    }
}

.bg-indigo-800 {
    background-color: var(--color-indigo-700);
}