/*  JewelDesk.

    The logo is purple and gold, so the brand lockup is given room and the
    palette around it is left to theme.css - a mark that fights the theme it
    sits in is a mark nobody keeps.  */

.brandmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/*  Height, never width: the logo is much wider than it is tall, and sizing by
    width makes it a different height in every bar it appears in.  */
.brandmark img { height: 44px; width: auto; display: block; }

/*  BIGGER IN THE BAR - the owner's ruling of 4 Sep 2026, "increase width height
    of logo", given with the logo moved to the left of the menu button.

    STILL SIZED BY HEIGHT ALONE, for the reason above: this mark is much wider
    than it is tall, so setting a width would make it a different height in
    every bar it appears in. 30px to 40px is a third more mark on the same one
    line, and the top bar's own padding already carries it - nothing else in
    that row is taller than the sign-in controls beside it.  */
.topbar .brandmark img { height: 40px; }

/*  THE FILE HAS A WHITE BACKGROUND AND NO TRANSPARENCY, so it needs a plate on
    EVERY ground - which it did not have until 4 Sep 2026, and the owner saw the
    consequence: "logo visibility issue".

    ON A DARK GROUND the white slab had to be made to look deliberate, which is
    what this rule was written for. ON A LIGHT ONE the opposite problem was
    missed entirely: white on the near-white bar measured 1.00:1 - no edge at
    all - so the mark read as letters floating with nothing holding them.

    So the plate is unconditional now, and on the light palettes it carries a
    hairline as well: a white card on a white bar is only a card if something
    draws its edge.  */
.brandmark img {
    background: #FFFFFF;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

[data-theme="assay"] .brandmark img,
[data-theme="sindoor"] .brandmark img { box-shadow: 0 0 0 1px var(--line); }

/*  The sign-in pages lead with the mark rather than a heading: it is the first
    thing that says which product this is.  */
.brand-hero {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.brand-hero img {
    height: 96px;
    width: auto;
    max-width: 100%;
    background: #FFFFFF;
    padding: 10px 16px;
    border-radius: var(--radius);
}

/*  A light theme needs no plate - the file's own white ground already
    matches, and a second white rectangle on top of it shows as an edge.  */
[data-theme="assay"] .brand-hero img,
[data-theme="sindoor"] .brand-hero img {
    background: transparent;
    padding: 0;
}

@media (max-width: 600px) {
    .brand-hero img { height: 64px; }
}