/* One mark per level (#323): Argos in the topbar (Filament's own brand slot),
   The Easy Way centred in the topbar, the client in the sidebar.

   Product CSS, not design system: the tokens come from the DS, the layout is
   ours. No height in px anywhere — a mark box that cannot grow clips the
   moment the user enlarges text (WCAG 1.4.4), and rem follows the root size.

   The topbar is the positioning context for the centred company mark. It is
   Filament's element, but the only thing added is `position: relative`, which
   changes nothing about its own layout (it is a flex row with no offsets). */
.fi-topbar {
    position: relative;
}

/* The centred company wordmark. Absolute, so it takes no room from the start
   and end groups; pointer-events off, so a click on the centre of the bar
   still lands on whatever Filament put there. It is decorative chrome that
   happens to carry a name: the alt names it for assistive tech. */
.ssmt-marks__company {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    /* 3rem. The mark is the horizontal lock-up, which carries the payoff line
       under the name, and the height is set by what the payoff needs.

       History, because each step was a measurement. At 1.75rem the payoff of
       the 1.14.0 lock-up rendered 8.1px tall — a green smudge, not words. At
       2.5rem it was 11.5px and read, and the mark was 277px wide. Design
       system 1.15.0 made the jigsaw 1.5× the height of the type, so at 2.5rem
       the type shrank by a third and the payoff fell back to about 7.7px.

       At 3rem the type is 32px of the 48, which puts the payoff at about
       9.2px — derived from the proportions, not measured, and smaller than
       the 11.5px of the old lock-up. The mark is 249px wide, and the 64px bar
       leaves 8px above and below. Measured in the browser on the client panel
       on 2026-09-25.

       ⚠️ In the light theme the bar is white and the payoff is green #73BE45:
       2.29:1. On the dark bar it is 7.7:1. Size does not move that ratio — it
       is a fact of the colour. WCAG exempts logotypes from contrast, so this
       is not a failure, but in light the line stays faint at any height. */
    height: 3rem;
    width: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Under `lg` the bar holds the icon-only product mark on the left (16→48px)
   and bell + avatar on the right (88px from the edge). A 249px mark centred in
   the bar meets whichever neighbour is closer, and the right one always is.

   ⚠️ This threshold was 26rem and became 32rem when the mark doubled in
   width. Measured in the browser on the running client panel on 2026-09-25,
   with the 1.15.0 lock-up at 3rem: at 512px the gaps are 32px to the sidebar
   toggle and 30px to the bell. At 416px — the old breakpoint — the mark would
   still run about 4px INTO the bell (derived, not measured). So the company
   mark yields under 32rem, and the product stays: it is the one that tells
   you which app you are in. */
@media (width < 32rem) {
    .ssmt-marks__company {
        display: none;
    }
}

/* A topbar that carries the global search has ~13rem less room on the right,
   and the search does not go away under `lg`. Measured at 780px: the search
   box started 4px after the centred mark ended — one step narrower and they
   overlap. So where the search is, the mark yields a breakpoint earlier;
   keyed off the search's presence rather than the panel id.

   ⚠️ DORMANT since #1157: global search is switched off on both panels, so
   today this matches nothing and the admin topbar behaves like the client
   one. It is kept because it is keyed off the field itself — if a panel ever
   turns the search back on, the mark yields again without anyone having to
   remember this file. Remeasure the 780px figure then, rather than trust it. */
@media (width < 64rem) {
    .fi-topbar:has(.fi-global-search) .ssmt-marks__company {
        display: none;
    }
}

/* The product mark, icon-only, for the widths where Filament hides
   `.fi-topbar-start` (and the brand slot with it): under `lg` = 64rem. Above
   that the wordmark in the brand slot is on screen and this one must not
   double it. */
.ssmt-marks__product {
    display: none;
    align-items: center;
    margin-inline-end: 0.5rem;
}

.ssmt-marks__product-img {
    height: 2rem;
    width: auto;
}

@media (width < 64rem) {
    .ssmt-marks__product {
        display: inline-flex;
    }
}

/* The client block at the top of the client panel's sidebar, above the nav
   groups. Sized by its content: the name may wrap, and it must be allowed to. */
.ssmt-tenant {
    display: flex;
    align-items: center;
    gap: var(--tew-density-cell-gap);
    padding: 0.5rem 0.5rem 0.75rem;
    margin-block-end: 0.5rem;
    border-block-end: 1px solid var(--tew-color-border);
}

.ssmt-tenant__logo {
    flex: 0 0 auto;
    height: 2.5rem;
    width: 2.5rem;
    object-fit: contain;
    border-radius: var(--tew-radius-sm);
    /* A logo with transparency on a dark sidebar: give it its own light card
       so a dark-on-transparent mark stays visible in dark mode. */
    background-color: var(--tew-color-surface);
}

.ssmt-tenant__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.ssmt-tenant__name {
    font-weight: 600;
    color: var(--tew-color-text);
    overflow-wrap: anywhere;
}

/* The running version, stamped on the product mark in the admin brand slot
   (#1129). A small word on a mark, with a ring so it reads as sitting ON the
   mark rather than as part of it.

   ⚠️ It is a hand copy of `.ssmt-icon__ads` (`social-content.css`, #796) — the
   pill, the ring, the muted background, eight declarations verbatim — and that
   is a DECLARED duplication, not an oversight (code-quality §1). Two reasons
   it is not extracted, and the second is the one that would change:

   1. They differ in the declaration that carries the meaning, so they change
      for different reasons (code-quality §2): `font-size` is `em` there, so
      the badge scales with the glyph it labels; it is `rem` here, because this
      is chrome and follows the root. Extracting would also put a shared class
      in one of two published stylesheets with the other overriding across
      files — a cascade dependency on the order of `FilamentAsset::register()`,
      which is not where anyone would look.
   2. 🚨 **A third chip is the trigger to extract**, and whoever writes it
      should do that instead of copying a third time. Until then the two can
      drift, and nothing turns red: no test reads CSS. The cross-reference is
      written at BOTH ends so the drift is at least findable.

   ⚠️ One thing does NOT carry over, and it is the placement. The Ads badge
   is offset from its glyph's bottom-right corner in `em` of the text, and
   mostly hangs past it; this mark is a WORDMARK, and an offset measured from
   its corner has nothing to do with where the letters end. So the chip is
   placed after the trailing edge instead (`inset-inline-start: 100%`) and
   stays absolute, so it takes no width from `.fi-topbar-start` — but it
   still occupies pixels the centred company mark has to clear, which is the
   number to re-measure if either mark changes.

   Measured at exactly 1024px, the first width where the brand slot — and so
   the chip — is on screen (Filament hides `.fi-topbar-start` under 64rem):
   the chip runs 202→243, and the company mark starts at 380. So the chip
   leaves 137px before it.

   Re-measured on 2026-09-25 on the client panel, after design system 1.15.0
   narrowed the company mark to 249px, at 512, 640, 780, 1000, 1023, 1024 and
   1280px: no overlap at any of them. The tightest point is 512px, with 32px
   on the left and 30px on the right before `width < 32rem` hides the mark. At
   1024px the right side ends at the bell, 286px away. */
.ssmt-brand {
    position: relative;
    /* inline-flex, not inline: it kills the baseline gap an inline `img` leaves
       under itself, which would make this box taller than the mark. No
       `align-items` — the only child in flow is the image, and it already
       fills the height; the chip is out of flow. */
    display: inline-flex;
    /* Filament puts the height on the `.fi-logo` box around us (2rem, from
       `->brandLogoHeight()`); fill it rather than restating the number, or the
       two drift the day someone changes one of them. */
    height: 100%;
}

.ssmt-brand__img {
    height: 100%;
    width: auto;
}

/* Contrast is the same pair the Ads badge uses, and it clears AA at this size
   in both themes: #3C4A53 on #FFFFFF is 9.14:1 in light, #C5CED3 on #16242E is
   9.91:1 in dark. Size does not move either ratio — see the note on the
   company mark above for the case where it cannot be fixed at all. */
.ssmt-brand__version {
    position: absolute;
    inset-inline-start: 100%;
    bottom: 0;
    margin-inline-start: 0.25rem;
    border-radius: 0.35em;
    background: var(--tew-color-text-muted);
    color: var(--tew-color-bg);
    padding: 0 0.25em;
    /* rem, not px: it follows the root size, so the chip grows with the
       reader's own font setting (WCAG 1.4.4). It cannot follow the MARK — that
       is an SVG sized by an inline style, and nothing in CSS scales with it. */
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    /* A version never wraps: «2.252.1» broken across two lines is unreadable
       and would make the chip taller than the mark it sits on. */
    white-space: nowrap;
    box-shadow: 0 0 0 0.12em var(--tew-color-bg);
}