/* ============================================================
   The sign-in page — the #818 `login-split` mockup, on Filament's
   own auth markup, plus the discreet company line (PLAN_LAYOUT §3).
   ------------------------------------------------------------
   Filament does not scan our Blade views, so nothing here can be a
   Tailwind utility in the template: the layout ships explicit
   `ssmt-` classes, registered through FilamentAsset.

   THREE THINGS THIS FILE DELIBERATELY DOES NOT DO.

   1. It does not paint the backdrop. The aurora, the grid and the
      vignette are drawn on EVERY page by `panel-surfaces.css` §2, and
      the login gets them for free. What is added here is the one
      moving thing in the product — the diagonal beam — and the still
      grain. They stay on this page alone because a beam sweeping
      behind a data table is a distraction with no message; behind the
      sign-in card it is the product saying it is awake.

   2. It does not restyle the form. The card wraps Filament's STOCK
      simple-page content, and the fields inside it are already opaque
      and outlined at 3:1 by `panel-surfaces.css` §7 — the same rule
      that governs every form in the product. The mockup drew its own
      inputs, mono uppercase labels and all; copying that would make
      the login the one page whose form looks unlike the rest of the
      app, which is a bigger loss than the resemblance is a gain. The
      card's gradient CTA is the exception, and it is the identity;
      the icons on the labels and the arrow on the button are CONTENT,
      added through Filament's own label and action API (§7).

   3. It does not run the type roles differently from the rest of the
      product — with ONE exception, and it is scoped so it cannot
      leak: `--tew-font-display` (Quicksand). The design system keeps
      Mulish for headings and reserves the display face for brand
      moments, and the six auth pages ARE the brand moment: the cover
      line and the card's title are a matched pair, and past the
      sign-in the face never appears again. The scope `.ssmt-login` —
      which is this layout and nothing else — is what guarantees that.

   Local custom properties are prefixed `--ssmt-login-` and are all
   declared in §0, with their dark values next to them, so the two
   themes are read side by side instead of hunted for.
   ============================================================ */

/* ------------------------------------------------------------
   0. THE PAGE'S OWN TOKENS

   Every one of these is either a design-system token or a value
   derived from one. Where the mockup wrote a literal rgba, the
   comment says which token it turned out to be.
   ------------------------------------------------------------ */
.ssmt-login {
    /* The beam and the grain. Light sweeps a white band across the
       page; dark sweeps a pale blue one and SCREENS it, which is what
       makes it read as light rather than as paint. */
    --ssmt-login-beam: color-mix(in srgb, var(--tew-gray-white) 55%, transparent);
    --ssmt-login-beam-blend: normal;
    --ssmt-login-grain-opacity: 0.03;
    --ssmt-login-grain-blend: multiply;

    /* Chrome surfaces: the status pill, the chips, the theme switcher.
       Translucent on purpose — they sit over the backdrop and are the
       one place on the page where letting it through is the point. */
    --ssmt-login-fill: color-mix(in srgb, var(--tew-color-surface) 70%, transparent);

    /* The card. `--tew-shadow-lg` IS the mockup's light card shadow,
       to the value; dark needs its own, because a shadow that dark
       mode inherits from light mode is invisible. */
    --ssmt-login-card-bg: color-mix(in srgb, var(--tew-color-surface) 78%, transparent);
    --ssmt-login-card-border: var(--tew-color-border);
    --ssmt-login-card-shadow: var(--tew-shadow-lg);
    --ssmt-login-card-hair: linear-gradient(
        to right,
        transparent,
        color-mix(in srgb, var(--tew-gray-white) 90%, transparent),
        transparent
    );
    --ssmt-login-card-tint: radial-gradient(
        ellipse at top,
        color-mix(in srgb, var(--tew-blue-500) 8%, transparent),
        transparent 55%
    );
    --ssmt-login-card-spot: color-mix(in srgb, var(--tew-blue-500) 10%, transparent);

    /* The reflection frozen across the last word of the cover line.
       Both ramps stay on one side of the contrast line — dark inks in
       light mode, light inks in dark — so the word never dips below
       4.5:1 at any stop. That is the whole reason it is two gradients
       and not one with a filter. */
    --ssmt-login-shiny: linear-gradient(
        110deg,
        var(--tew-blue-700) 0% 40%,
        var(--tew-green-800) 45%,
        var(--tew-blue-900) 50%,
        var(--tew-green-800) 55%,
        var(--tew-blue-700) 60% 100%
    );

    /* The call to action. NOT `--tew-gradient-brand`: that one ends on
       green-500, which carries white at 2.29:1. These three stops keep
       4.79:1 at the worst point, and the label on this button is the
       only word on the page that must be read. */
    --ssmt-login-cta: linear-gradient(
        100deg,
        var(--tew-blue-700) 0%,
        var(--tew-blue-600) 55%,
        var(--tew-green-700) 100%
    );

    --ssmt-login-tip-bg: color-mix(in srgb, var(--tew-color-surface) 97%, transparent);

    /* 🚨 THE MICRO LABELS ARE ONE STEP DARKER THAN THE MOCKUP'S, AND THAN
       THE REST OF THE PRODUCT'S, AND IT IS MEASURED. The kicker, the
       status pill, the «in sviluppo» label, the facts' terms and the
       company line are 10–12px mono — the size where AA is least
       forgiving — and they sit DIRECTLY on the backdrop, with no
       surface between.

       `--tew-color-text-subtle` is the role they would otherwise take,
       and the design system checks it at 5.53:1 light / 5.66:1 dark —
       against the FLAT bg token. This page's background is not flat.
       Sampled from the rendered page at 1440×900, text hidden so the
       pixels under each label could be read (2nd percentile, i.e. the
       realistically worst background under a glyph, not one stray
       pixel):

           label         light    dark
           kicker         4.55    5.53
           status pill    4.43 ✗  3.58 ✗
           «in sviluppo»  4.52    5.90
           facts term     4.72    5.66
           company line   4.25 ✗  4.90

       Three failures and three passes with nothing to spare. The
       aurora costs about a full point of ratio, and it costs it
       exactly where the type is smallest. So the micro role steps down
       to `text-muted`, re-measured on the same pixels at 7.0–8.0 light
       and 5.2–8.6 dark (the 5.2 is the pill, over the brightest lobe
       of the aurora) — and the hierarchy the fade used to carry is
       handed to the things that can carry it without spending
       contrast: the dashed outline on the «in sviluppo» chips, and the
       strong text role on the facts' values.

       ⚠️ The axe gate would NOT have caught this, and that is worth
       knowing before trusting it here. axe resolves an element's
       background by walking up the computed `background-color` of its
       ancestors; ours is a `position: fixed` layer of gradients at
       `z-index: -1`, which no ancestor declares. axe falls back to
       `.fi-body`'s flat grey and reports a comfortable pass on every
       one of the three failures above. The numbers here come from the
       rendered pixels instead. */
    --ssmt-login-micro: var(--tew-color-text-muted);
}

.dark .ssmt-login {
    --ssmt-login-beam: color-mix(in srgb, var(--tew-blue-100) 17%, transparent);
    --ssmt-login-beam-blend: screen;
    --ssmt-login-grain-opacity: 0.05;
    --ssmt-login-grain-blend: overlay;

    --ssmt-login-fill: color-mix(in srgb, var(--tew-gray-white) 4.5%, transparent);

    --ssmt-login-card-bg: color-mix(in srgb, var(--tew-gray-white) 3.5%, transparent);
    --ssmt-login-card-border: color-mix(in srgb, var(--tew-gray-white) 11%, transparent);
    --ssmt-login-card-shadow:
        0 8px 60px -20px color-mix(in srgb, var(--tew-blue-800) 55%, transparent),
        inset 0 1px 0 0 color-mix(in srgb, var(--tew-gray-white) 6%, transparent);
    --ssmt-login-card-hair: linear-gradient(
        to right,
        transparent,
        color-mix(in srgb, var(--tew-gray-white) 42%, transparent),
        transparent
    );
    --ssmt-login-card-tint: radial-gradient(
        ellipse at top,
        color-mix(in srgb, var(--tew-blue-400) 14%, transparent),
        transparent 55%
    );
    --ssmt-login-card-spot: color-mix(in srgb, var(--tew-blue-500) 16%, transparent);

    --ssmt-login-shiny: linear-gradient(
        110deg,
        var(--tew-gray-100) 0% 40%,
        var(--tew-blue-200) 45%,
        var(--tew-green-200) 50%,
        var(--tew-blue-200) 55%,
        var(--tew-gray-100) 60% 100%
    );

    --ssmt-login-tip-bg: color-mix(in srgb, var(--tew-color-surface) 94%, transparent);
}

/* ------------------------------------------------------------
   1. THE GRID

   One column up to `lg`, where the brand column appears. It is the
   WIDER of the two (1.1fr against 1fr): the cover line is the long
   text and the card has a max-width anyway, so the extra pixels go
   where they are read.
   ------------------------------------------------------------ */
.ssmt-login {
    display: grid;
    grid-template-columns: 1fr;
    /* The columns take the screen, the company line takes what it needs
       under both of them (§6, `__foot`). */
    grid-template-rows: 1fr auto;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--tew-color-text-muted);
}

@media (min-width: 1024px) {
    .ssmt-login {
        grid-template-columns: 1.1fr 1fr;
    }
}

/* ------------------------------------------------------------
   2. MOTION — one animation, and it is the beam

   The aurora does NOT drift. Two moving sources on the same surface
   fight each other, and the drift was the one that cost the most (a
   `blur(70px)` on a layer larger than the screen, recomputed every
   frame) for the least noticed.

   The layer sits at `z-index: -1`, the same level as the backdrop it
   paints over, and NOT inside a stacking context of its own: the
   beam's `mix-blend-mode` has to see the aurora to blend with it, and
   an isolated layer would blend with nothing.
   ------------------------------------------------------------ */
.ssmt-login__motion {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.ssmt-login__beam {
    position: absolute;
    inset: -60%;
    opacity: 0.6;
    mix-blend-mode: var(--ssmt-login-beam-blend);
    background: linear-gradient(
            135deg,
            transparent 0% 40%,
            color-mix(in srgb, var(--ssmt-login-beam) 45%, transparent) 48%,
            var(--ssmt-login-beam) 50%,
            color-mix(in srgb, var(--ssmt-login-beam) 45%, transparent) 52%,
            transparent 60% 100%
        )
        no-repeat;
    animation: ssmt-login-beam 8s linear infinite;
}

/* The band is at 135°, i.e. perpendicular to the diagonal it travels,
   so `translate(d, d)` pushes it across the screen from top-left to
   bottom-right. At both ends it is off-screen on either side, which is
   why the loop's restart is not visible. */
@keyframes ssmt-login-beam {
    from {
        transform: translate(-45%, -45%);
    }

    to {
        transform: translate(45%, 45%);
    }
}

/* Still, not shimmering: the flicker was a second animation, and we
   keep one. Still, it also no longer needs the margin it took to
   translate without uncovering its own edges. */
.ssmt-login__grain {
    position: absolute;
    inset: 0;
    opacity: var(--ssmt-login-grain-opacity);
    mix-blend-mode: var(--ssmt-login-grain-blend);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* The entrance. Staggered by rank down the column, so the eye is led
   from the mark to the headline to the detail instead of being handed
   the whole page at once. The delay is a MODIFIER and not an inline
   style, because a `style=` attribute in a Blade of ours is forbidden
   and, here, would also have put the timing out of reach of the
   reduced-motion rule below. */
@keyframes ssmt-login-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ssmt-login__rise {
    animation: ssmt-login-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ssmt-login__rise--2 {
    animation-delay: 0.15s;
}

.ssmt-login__rise--3 {
    animation-delay: 0.25s;
}

.ssmt-login__rise--4 {
    animation-delay: 0.4s;
}

.ssmt-login__rise--5 {
    animation-delay: 0.55s;
}

.ssmt-login__rise--6 {
    animation-delay: 0.62s;
}

.ssmt-login__rise--7 {
    animation-delay: 0.7s;
}

@media (prefers-reduced-motion: reduce) {
    .ssmt-login *,
    .ssmt-login *::before,
    .ssmt-login *::after {
        animation: none !important;
        transition: none !important;
    }

    /* Stopped at `from`, the beam would be off-screen — i.e. it would
       simply be gone. Parked mid-run instead: the diagonal is there,
       it just does not travel. */
    .ssmt-login__beam {
        transform: translate(0, 0);
    }
}

/* ------------------------------------------------------------
   3. THE BRAND COLUMN

   Below `lg` it is not hidden, it is ABSENT from the layout: its
   content would push the card off a phone screen. What survives down
   there is the mark, repeated above the card by `__mark` (§6).
   ------------------------------------------------------------ */
.ssmt-login__aside {
    position: relative;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 2.5rem;
}

@media (min-width: 1024px) {
    .ssmt-login__aside {
        display: flex;
    }
}

@media (min-width: 1280px) {
    .ssmt-login__aside {
        padding: 3.5rem;
    }
}

/* Less room at the BOTTOM of the column since the company line became a
   row of its own under both columns (2026-09-25): the column now ends
   where that row starts, so its full bottom padding stacked on top of the
   row's and lifted the facts away from the foot of the page. */
@media (min-width: 1024px) {
    .ssmt-login__aside {
        /* 1rem plus the 10px the owner asked between the facts and the
           company line (2026-09-25). */
        padding-bottom: 1.625rem;
    }
}

.ssmt-login__aside-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/* The full lockup carries the «Inside Social Ads» claim, which is only
   ~11.5% of its height. Measured on screen: at 2rem — the size
   PLAN_LAYOUT §2.2 flags as illegible — the claim is a smudge, and at
   3.25rem it still is. 4.5rem is where its letters clear 8px. */
.ssmt-login__lockup {
    display: block;
    height: 4.5rem;
}

/* The box the version chip hangs off (`auth/product-lockup.blade.php`).
   The chip is `.ssmt-brand__version` from `panel-marks.css`, absolutely
   placed at the bottom of its positioned parent and just past its end —
   so this is that parent, and it is exactly as wide as the lockup: the
   chip leaves the centring of the mark below `lg` untouched. */
.ssmt-login__lockup-wrap {
    position: relative;
    display: inline-flex;
}

/* Argos Panoptes, the hundred-eyed giant: it is a quotation, so it is
   set in the serif italic the design system keeps for exactly that. */
.ssmt-login__claim {
    margin: 0.9rem 0 0;
    max-width: 23rem;
    font-family: var(--tew-font-serif);
    font-style: italic;
    font-size: 0.96875rem;
    line-height: 1.45;
    color: var(--tew-color-text-muted);
}

.ssmt-login__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--tew-color-border);
    border-radius: var(--tew-radius-pill);
    background: var(--ssmt-login-fill);
    backdrop-filter: blur(12px);
    font-family: var(--tew-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ssmt-login-micro);
    /* Two uppercase words at 0.2em tracking wrap at exactly 1024px,
       and a pill that has gone two lines tall reads as a paragraph
       someone put a border around. */
    white-space: nowrap;
}

/* «Online» is said by the halo, not by a pulse: a blinking dot on a
   sign-in page reads as an alarm. */
.ssmt-login__dot {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--tew-radius-pill);
    background: var(--tew-color-success);
    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--tew-color-success) 55%, transparent);
}

/* #1176: a window is announced, or open. The same halo in the warning tone —
   the design system's twin of the success one above, not a colour typed here.
   Still no pulse, for the reason above: the banner is the alarm, the pill is
   the state. */
.ssmt-login__pill--maintenance .ssmt-login__dot {
    background: var(--tew-color-warning);
    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--tew-color-warning) 55%, transparent);
}

.ssmt-login__aside-mid {
    max-width: 36rem;
}

/* The rule before the kicker is drawn, not marked up: it says nothing,
   so it has no business being an element. */
.ssmt-login__kicker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.75rem;
    font-family: var(--tew-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ssmt-login-micro);
}

.ssmt-login__kicker::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 0.0625rem;
    background: linear-gradient(to right, transparent, var(--tew-color-border-strong));
}

/* Set like a heading and deliberately NOT one: the page's heading is
   the card's, which is where a screen reader should land. See the
   Blade for why. */
.ssmt-login__headline {
    margin: 0;
    font-family: var(--tew-font-display);
    font-weight: 600;
    font-size: clamp(2.5rem, 4.6vw, 4.1rem);
    line-height: 0.98;
    letter-spacing: var(--tew-tracking-tight);
    color: var(--tew-color-text);
}

.ssmt-login__headline-lead {
    display: block;
}

.ssmt-login__headline em {
    font-family: var(--tew-font-serif);
    font-style: italic;
    font-weight: 400;
}

.ssmt-login__shiny {
    color: transparent;
    background: var(--ssmt-login-shiny) 50% 0 / 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

.ssmt-login__lede {
    margin: 1.75rem 0 0;
    max-width: 30rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--tew-color-text-muted);
}

/* ------------------------------------------------------------
   4. THE CHIPS AND THEIR TOOLTIPS

   The chip is a <button> because it carries an explanation. A `title`
   on an inert element is not an accessible name and works for the
   mouse alone; the tooltip therefore hangs off something focusable
   and shows on :hover AND on :focus-within.
   ------------------------------------------------------------ */
.ssmt-login__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
}

.ssmt-login__chip {
    position: relative;
    display: inline-flex;
}

.ssmt-login__chips button {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--tew-color-border);
    border-radius: var(--tew-radius-pill);
    background: var(--ssmt-login-fill);
    backdrop-filter: blur(12px);
    font-family: inherit;
    font-size: 0.71875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tew-color-text-muted);
    /* `help`, not `pointer`: the chip explains, it does not navigate. */
    cursor: help;
    transition:
        border-color var(--tew-dur-base) var(--tew-ease-out),
        color var(--tew-dur-base) var(--tew-ease-out);
}

.ssmt-login__chips button:hover {
    border-color: var(--tew-color-border-strong);
    color: var(--tew-color-text);
}

.ssmt-login__chips button:focus-visible {
    outline: 2px solid var(--tew-color-focus-ring);
    outline-offset: 3px;
}

/* The second row is what is NOT released yet, and the dashed outline
   plus the group label are what say so — never fainter text. Note the
   colour is NOT set here: these chips read at exactly the tone of the
   released ones, which is the mockup's rule («dimming a label under
   4.5:1 would make the opacity carry the meaning») finally taken at
   its word. The outline and the heading carry it instead. */
.ssmt-login__chips--soon {
    margin-top: 0.7rem;
}

.ssmt-login__chips--soon button {
    border-style: dashed;
    background: none;
}

/* The group label sits ABOVE its row, not in line with it: the moment
   the chips wrap, an inline label leaves the second line unexplained.
   Its rule is drawn on the label for the same reason as §3's. */
.ssmt-login__soon-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.4rem 0 0;
    max-width: 30rem;
    font-family: var(--tew-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ssmt-login-micro);
}

.ssmt-login__soon-head span {
    white-space: nowrap;
}

.ssmt-login__soon-head::after {
    content: '';
    flex: 1;
    height: 0.0625rem;
    background: linear-gradient(to right, var(--tew-color-border), transparent);
}

.ssmt-login__tip {
    position: absolute;
    bottom: calc(100% + 0.6rem);
    inset-inline-start: 0;
    z-index: 20;
    width: max-content;
    max-width: min(21rem, 52vw);
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--ssmt-login-card-border);
    border-radius: var(--tew-radius-lg);
    background: var(--ssmt-login-tip-bg);
    box-shadow: var(--ssmt-login-card-shadow);
    backdrop-filter: blur(20px);
    font-size: 0.78125rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: start;
    text-transform: none;
    color: var(--tew-color-text-muted);
    opacity: 0;
    /* `visibility` and not `display`, so the tooltip keeps its id and
       its box: `aria-describedby` has to resolve at all times, and a
       display:none target is announced by nothing. */
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition:
        opacity 0.18s var(--tew-ease-out),
        transform 0.18s var(--tew-ease-out),
        visibility 0.18s;
}

.ssmt-login__chip:hover .ssmt-login__tip,
.ssmt-login__chip:focus-within .ssmt-login__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ------------------------------------------------------------
   5. THE FACTS AND THE CORNERS
   ------------------------------------------------------------ */
/* The two facts on ONE row, each read as «icon · term · value»
   (2026-09-25): side by side they are a line of metadata, not a table.
   `flex-wrap` rather than a fixed pair of columns, so a narrow column or
   enlarged text drops the second fact under the first instead of
   squeezing it. */
.ssmt-login__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin: 0;
    font-family: var(--tew-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* The mockup dimmed the term to 45% white, which lands near 4:1 on the
   dark page. These are words, not decoration, so the term takes the
   micro role (§0) and the VALUE steps up to the strong one — so the
   two are still told apart at a glance, and the step is paid for by
   making the answer brighter rather than the question dimmer. */
.ssmt-login__facts dt {
    color: var(--ssmt-login-micro);
}

.ssmt-login__facts dd {
    margin: 0;
    color: var(--tew-color-text);
}

/* The fact, and its term: the icon lives inside the `<dt>` (a `<dl>`
   group may hold only terms and values), so the term lays out icon and
   word the same way the fact lays out term and value. */
.ssmt-login__fact,
.ssmt-login__fact dt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* In `em`, so it grows with the text it sits beside (WCAG 1.4.4), and in
   the term's colour, so it reads as part of the label and not as a third
   thing to look at.

   Sized so the two icons are the same DRAWN height, not the same box: the
   flag below is 2em tall edge to edge, while a Heroicon draws about 20 of
   its 24 units, stroke included. 2.3em puts the envelope at the flag's
   ~22px — measured in the browser with `getBBox()` (2026-09-25). Both
   were doubled from their first size at the owner's request. */
.ssmt-login__fact-icon {
    flex: none;
    width: 2.3em;
    height: 2.3em;
    color: var(--ssmt-login-micro);
}

/* The region as the EU FLAG, not the bare ring of stars: in the term's grey
   at this size the ring read as a dotted circle — a spinner, not a flag. So
   the emblem is set on the flag's field at the flag's 3:2 proportion.

   ⚠️ Two local colour tokens, and on purpose: they are the flag's official
   colours (Reflex Blue and yellow, per the EU graphic guidelines), not
   product colours — the same kind of thing as the `--ssmt-platform-*`
   brand colours in `social-content.css` — so they do not belong in the
   design system and must not follow the theme. Named rather than written
   inline, because `CssTokensTest` refuses a raw hex outside a token
   declaration. The icon is decorative and hidden from assistive tech; the
   word «Europa» beside it carries the meaning. */
.ssmt-login__fact-icon--eu {
    --ssmt-eu-flag-blue: #039;
    --ssmt-eu-flag-yellow: #fc0;

    width: 3em;
    height: 2em;
    padding: 0.2em;
    box-sizing: border-box;
    border-radius: 0.25em;
    background: var(--ssmt-eu-flag-blue);
    color: var(--ssmt-eu-flag-yellow);
}

.ssmt-login__corner {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--tew-color-border-strong);
}

.ssmt-login__corner--end {
    top: 1.5rem;
    inset-inline-end: 1.5rem;
}

/* 0.75rem and not 1.5 at the start: with the facts now at the foot of
   the column (see the aside's bottom padding) the bracket sat on the
   first icon between 1024 and 1279px — measured at 1024, 4×7px of
   overlap. From 1280 the column padding is wider and the rule below puts
   it back at 2rem. */
.ssmt-login__corner--start {
    bottom: 1.5rem;
    inset-inline-start: 0.75rem;
    transform: rotate(180deg);
}

@media (min-width: 1280px) {
    .ssmt-login__corner--end {
        top: 2rem;
        inset-inline-end: 2rem;
    }

    .ssmt-login__corner--start {
        bottom: 2rem;
        inset-inline-start: 2rem;
    }
}

/* ------------------------------------------------------------
   6. THE FORM COLUMN
   ------------------------------------------------------------ */
.ssmt-login__main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .ssmt-login__main {
        padding: 2.5rem;
    }
}

/* Below `lg` the mark sits at the top of this column and the theme
   switcher is pinned over it. Measured at 390×620 they OVERLAP — the
   switcher's icons land on the wordmark — because a short screen
   collapses the auto margins that were holding them apart. So the
   column reserves the switcher's row outright instead of letting the
   two negotiate for it. From `lg` up there is nothing to clear: the
   brand is in the other column. */
@media (max-width: 1023.98px) {
    .ssmt-login__main {
        padding-top: 4.5rem;
    }
}

.ssmt-login__main-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* The column centres on the card; the company line at the bottom
       is pushed out of that centring by the auto margins, so adding it
       does not shift the card upwards. */
    margin-block: auto;
}

/* Top right, where every internal page keeps it. A control that moves
   corner between two pages is looked for twice. */
.ssmt-login__theme {
    position: absolute;
    top: 1.5rem;
    inset-inline-end: 1.5rem;
}

@media (min-width: 640px) {
    .ssmt-login__theme {
        top: 2rem;
        inset-inline-end: 2rem;
    }
}

/* Below `lg` the brand column is gone and the mark comes here. From
   `lg` up the column says it already, so this copy goes. */
.ssmt-login__mark {
    width: min(22rem, 100%);
    margin-bottom: 2rem;
    text-align: center;
}

.ssmt-login__mark .ssmt-login__lockup {
    height: 4rem;
    margin-inline: auto;
}

.ssmt-login__mark .ssmt-login__claim {
    max-width: none;
    margin-top: 0.8rem;
    font-size: 0.875rem;
}

@media (min-width: 1024px) {
    .ssmt-login__mark {
        display: none;
    }
}

.ssmt-login__card {
    position: relative;
    width: 100%;
    max-width: 27rem;
    padding: 2rem;
    overflow: hidden;
    border: 1px solid var(--ssmt-login-card-border);
    border-radius: var(--tew-radius-xl);
    background: var(--ssmt-login-card-bg);
    box-shadow: var(--ssmt-login-card-shadow);
    backdrop-filter: blur(28px);
}

@media (min-width: 640px) {
    .ssmt-login__card {
        padding: 2.5rem;
    }
}

/* The highlight along the card's top edge and the tint behind it, both
   drawn rather than marked up — an element each would say nothing. */
.ssmt-login__card::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 0.0625rem;
    background: var(--ssmt-login-card-hair);
    pointer-events: none;
}

.ssmt-login__card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--tew-radius-xl);
    background: var(--ssmt-login-card-tint);
    pointer-events: none;
}

/* The light that follows the pointer. The two coordinates come from
   the only script on the page; everything else about it is here, and
   with no pointer it is simply never shown. */
.ssmt-login__card-spot {
    position: absolute;
    inset: 0;
    border-radius: var(--tew-radius-xl);
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(
        600px circle at var(--ssmt-spot-x, 50%) var(--ssmt-spot-y, 50%),
        var(--ssmt-login-card-spot),
        transparent 60%
    );
    transition: opacity 0.7s var(--tew-ease-out);
}

.ssmt-login__card:hover .ssmt-login__card-spot {
    opacity: 1;
}

/* Above the two drawn layers. */
.ssmt-login__card-body {
    position: relative;
}

/* A row of the page grid, not of the form column: it spans both columns
   so the company data runs on one row (see the layout). */
.ssmt-login__foot {
    grid-column: 1 / -1;
}

/* ------------------------------------------------------------
   7. THE STOCK CARD CONTENT

   Every control inside the card is still Filament's, drawn by Filament.
   What is here is the header's alignment, the CTA, and the pieces the
   owner asked back from the mockup at the GUI review (2026-09-22): the
   «Bentornato» badge, the icons on the two labels, the arrow on the
   button and the two-step note. Each of those enters through a builder
   Filament exposes — see `App\Filament\Auth\Login` — never by
   re-rendering a control.
   ------------------------------------------------------------ */

/* The simple header repeats the panel's brand mark above the title.
   The lockup is already on this page — in the column from `lg` up, and
   above the card below it — so the third copy goes. The version that
   mark carries on admin is not lost with it: it is beside the lockup,
   on both panels' sign-in pages (`auth/product-lockup.blade.php`). */
.ssmt-login .fi-simple-header .fi-logo {
    display: none;
}

/* Filament centres the header. The card reads as a column of
   left-aligned text — label, field, label, field — and a centred title
   on top of it is the only thing not lining up with anything. */
.ssmt-login .fi-simple-header {
    align-items: flex-start;
}

.ssmt-login .fi-simple-header-heading,
.ssmt-login .fi-simple-header-subheading {
    text-align: start;
}

.ssmt-login .fi-simple-header-heading {
    font-family: var(--tew-font-display);
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

/* The emphasised word in the title, matched to the cover line's. */
.ssmt-login .fi-simple-header-heading em {
    font-family: var(--tew-font-serif);
    font-style: italic;
    font-weight: 400;
}

.ssmt-login .fi-simple-header-subheading {
    color: var(--tew-color-text-muted);
}

/* The one button on the page that must be found, and the only part of
   the form this file touches.

   🚨 THE LABEL COLOUR IS SET HERE BECAUSE FILAMENT PICKS IT FOR A
   DIFFERENT BACKGROUND. Filament chooses a button's text to contrast
   with ITS OWN fill, and in light mode the primary fill is the 400 step
   — a light blue — so the label it picks is the 950 step, near-black.
   Painting this dark gradient over that fill left a navy label on dark
   blue: the one word on the page that must be read, at 2.08–3.07:1
   across the three stops, and only in light mode (dark mode's fill is
   the 600 step, with a white label, and looked right). Hover moves
   Filament's label to the 800 step, so hover is pinned too.

   The fill underneath moves to the design system's primary SOLID for
   the same reason: the gradient is a background IMAGE, and the colour
   under it is what anything that cannot paint the image shows. Left at
   Filament's 400, that fallback would carry the white label at ~2.4:1.
   The solid is the role the design system pairs with white on purpose.

   ⚠️ axe does not check this. A background with an image is reported
   as «incomplete — needs review» for colour contrast, never as a
   violation, so the login's axe case stays green either way. Measured
   by hand instead, white against: blue-700 7.08:1, blue-600 4.87:1,
   green-700 4.79:1 (the worst point, which §0 promised), and the
   primary-solid fallback 7.08:1. */
.ssmt-login .fi-sc-actions .fi-btn.fi-color-primary,
.ssmt-login .fi-sc-actions .fi-btn.fi-color-primary:hover {
    background-color: var(--tew-color-primary-solid);
    color: var(--tew-color-on-primary-solid);
}

.ssmt-login .fi-sc-actions .fi-btn.fi-color-primary {
    background-image: var(--ssmt-login-cta);
    box-shadow: 0 8px 30px -8px color-mix(in srgb, var(--tew-blue-500) 55%, transparent);
    transition: box-shadow var(--tew-dur-slow) var(--tew-ease-out);
}

.ssmt-login .fi-sc-actions .fi-btn.fi-color-primary:hover {
    box-shadow: 0 12px 40px -8px color-mix(in srgb, var(--tew-blue-500) 80%, transparent);
}

/* The arrow after «Accedi ad Argos» leans the way it points when the
   button is hovered. The reduced-motion rule in §2 takes the transition
   away; the lean itself stays, because it is a state, not a movement. */
.ssmt-login .fi-sc-actions .fi-btn.fi-color-primary .fi-icon {
    transition: transform var(--tew-dur-base) var(--tew-ease-out);
}

.ssmt-login .fi-sc-actions .fi-btn.fi-color-primary:hover .fi-icon {
    transform: translate(0.125rem, -0.125rem);
}

/* «Bentornato», above the title — `auth/welcome-badge.blade.php`. The
   same pill as the status one in the column, on purpose: two badges on
   one page that look unrelated read as two systems. */
.ssmt-login__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--tew-color-border);
    border-radius: var(--tew-radius-pill);
    background: var(--ssmt-login-fill);
    font-family: var(--tew-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ssmt-login-micro);
}

/* Decorative, and `aria-hidden` by Filament: the 3:1 floor for
   non-text contrast does not apply, so it may take the brand blue. */
.ssmt-login__badge-icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--tew-color-primary);
}

/* The icon Login::withLabelIcon() puts in front of «Email» and
   «Password». Sized in `em`, so it grows with the label it sits in. */
.ssmt-login .ssmt-login__label-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-end: 0.35em;
    vertical-align: -0.15em;
    color: var(--ssmt-login-micro);
}

/* The icon and its word are one unit. Measured at 390px: the icon's extra
   width pushed «Password» onto a second line and left the padlock alone on
   the first, because the label shares its row with the «forgot your
   password?» link and flex shrank the label first. Kept whole, it is the
   link that wraps instead — which is the one of the two that can. */
.ssmt-login .fi-fo-field-label:has(.ssmt-login__label-icon) {
    white-space: nowrap;
}

/* «Verifica in due passaggi» and the line under it —
   `auth/two-step-note.blade.php`. The rules either side of the label are
   drawn: they say nothing, so they are not elements. */
.ssmt-login__two-step {
    margin-top: 1.75rem;
}

.ssmt-login__two-step-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1rem;
    font-family: var(--tew-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ssmt-login-micro);
}

.ssmt-login__two-step-label::before,
.ssmt-login__two-step-label::after {
    content: '';
    flex: 1;
    height: 0.0625rem;
    background: linear-gradient(to right, transparent, var(--tew-color-border), transparent);
}

.ssmt-login__two-step-note {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    text-align: center;
    color: var(--tew-color-text-muted);
}

/* ------------------------------------------------------------
   8. THE COMPANY LINE (shared: client panel + auth pages)
   ------------------------------------------------------------ */
/* The line and its two groups share the flex basics below, and the line then
   overrides what makes it the container — a column of the two rows, its gap,
   its padding and type. Written as one shared rule and one exception, because
   copying the shared four would mean a future `justify-content` on the line
   leaving the groups centred behind it, which is the kind of drift nobody goes
   looking for. */
.ssmt-company-footer,
.ssmt-company-footer__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.ssmt-company-footer {
    /* A COLUMN: the data on one row, the legal links always on the next
       (2026-09-25). As a wrapping row the two groups sat side by side or
       stacked depending on the width, so where the line broke was a matter of
       pixels; stacked by construction, the links start a row of their own at
       every width. No separator between the two rows, and none is needed —
       a `·` there would hang at the end of the data row. */
    flex-direction: column;
    row-gap: 0.25rem;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--tew-color-text-subtle);
    text-align: center;
}

/* The company data, and the legal links: one group, one row each. Each still
   wraps internally — at 320px nothing fits on one row and a group that refused
   to break would push a scrollbar under the whole page — so this fixes where
   the links start, not that nothing else ever breaks. */

/* On the panels this line sits on the footer bar, which is OPAQUE
   (`--ssmt-chrome-veil: 0`), so the subtle role keeps the 5.53:1 it was
   checked at and «discreet» costs nothing. On the sign-in page the same
   line sits on the backdrop and measures 4.25:1 over the green lobe —
   see §0. The difference is real, so the override is scoped to where it
   is true rather than darkening the bar on every page to be safe. */
/* The two legal links (#1153).

   `color: inherit` on purpose: this line renders over two different surfaces
   with two different measured contrasts — the opaque footer bar (5.53:1) and
   the login backdrop, which needs the override right below — so inheriting
   keeps whichever was checked instead of introducing a third colour nobody
   has audited.

   🚨 The underline is not decoration, it is what makes them links. Tailwind's
   preflight sets `a { color: inherit; text-decoration: inherit }`, so an
   anchor dropped into this strip is visually identical to the company name
   next to it — and NO axe rule catches that, because the accessible name and
   the role are both correct. It is the same defect the first-login gate paid
   for with a class that existed in no stylesheet. */
.ssmt-company-footer__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.ssmt-company-footer__link:hover,
.ssmt-company-footer__link:focus-visible {
    text-decoration-thickness: 2px;
}

/* Re-measured on 2026-09-25 after the line moved from the form column to a
   full-width row under both columns: the worst background pixel under any
   word of it gives 6.75:1 in light and 6.05:1 in dark at 1440px — sampled in
   the browser with the text made transparent, not derived from the tokens. */
.ssmt-login .ssmt-company-footer {
    color: var(--ssmt-login-micro);
}

/* The footer text above was the axe audit's one *serious* contrast
   failure: #94a3b8 on white is 2.56:1, well under the 4.5:1 floor. The
   DS subtle role measures 5.53:1 in light and 6.81:1 in dark, in the
   browser.
   The separator is the `&middot;` between two links. It is
   `aria-hidden`, i.e. purely decorative, so the contrast floor does
   not apply to it — which is the only reason it may stay dimmer than
   the text it separates. It gets a border tone rather than `opacity`,
   so it dims without dragging the text with it. */
.ssmt-company-footer__sep {
    color: var(--tew-color-border-strong);
}