/* The platform showcase, shown beside the sign in card and again on the console landing page.

   Structure and proportions are Lustro's (AF.CreditReportParser.Web, the .login-showcase rules
   in its app.css): concentric rings, a circular medallion, one capability at a time, dots
   underneath. What is added here is the ambient layer, the launcher cards and the pause control.

   Every colour is a token from :root in app.css. Nothing in this file declares a palette value
   of its own, because two copies of a palette drift apart and the copy nobody remembers is the
   one that is wrong.

   Contrast, measured against --shell-900 #060b18, which is the darkest thing this text sits on,
   and re checked against --surface-raised #13203a, the lightest thing any of it crosses:

       --ink        #f4f7fb   17.9:1 on --shell-900    headlines and slide titles
       --ink-muted  #9fb0c3    8.9:1 on --shell-900    captions, standfirst, detail, greeting
       --gold       #e8b84b   10.6:1 on --shell-900    the eyebrow and the medallion glyph

   No readable text in this file uses --ink-faint. It clears the bar now, but it is the token
   this codebase has already had to lift once, and secondary text has --ink-muted for it. */

/* Ambient artwork. Rings, glow and mesh, all decorative, all behind the content, and all kept
   at low opacity so that none of it competes with the words in front of it. */

.showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.showcase__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.showcase__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.showcase__ring--outer {
    width: 860px;
    height: 860px;
    opacity: 0.30;
}

.showcase__ring--mid {
    width: 600px;
    height: 600px;
    opacity: 0.45;
}

.showcase__ring--inner {
    width: 360px;
    height: 360px;
    opacity: 0.6;
}

/* Two soft washes of colour, so the panel is not a flat field. Both are held under 0.17 alpha
   and heavily blurred: the point is that the background stops being uniform, not that anybody
   notices a colour. */
.showcase__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.13;
}

.showcase__glow--gold {
    width: 460px;
    height: 460px;
    top: 4%;
    left: 44%;
    background: var(--gold);
}

.showcase__glow--blue {
    width: 520px;
    height: 520px;
    bottom: -12%;
    left: 6%;
    background: var(--status-info);
    opacity: 0.16;
}

/* A dot mesh, drawn with a repeating gradient rather than shipped as an image, so it scales to
   any panel size and costs nothing to download. Masked out towards the edges so it never reads
   as a hard edged texture. */
.showcase__mesh {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--hairline) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 100%);
    mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 100%);
}

/* The rotating slide. */

.showcase__stage {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    height: 430px;
}

.showcase__slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 30px;
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    transition: opacity 0.7s ease, transform 0.7s ease;
    pointer-events: none;
}

.showcase__slide.is-active {
    opacity: 1;
    transform: none;
}

.showcase__medallion {
    position: relative;
    width: 168px;
    height: 168px;
    margin-bottom: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A gold arc swept around the medallion, turning slowly. One conic gradient masked to a ring,
   so it is a single composited element and no image. */
.showcase__medallion-halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        transparent 190deg,
        rgba(232, 184, 75, 0.05) 250deg,
        rgba(232, 184, 75, 0.55) 330deg,
        rgba(245, 197, 66, 0.90) 358deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    animation: showcase-halo 9s linear infinite;
}

@keyframes showcase-halo {
    to {
        transform: rotate(360deg);
    }
}

.showcase__medallion-face {
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: radial-gradient(120% 120% at 30% 20%, var(--surface-raised) 0%, var(--shell-800) 100%);
    border: 1px solid var(--hairline);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase__title {
    font-family: InterSemiBold, "Inter", "Segoe UI", sans-serif;
    font-size: 27px;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 10px;
}

.showcase__caption {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-muted);
    max-width: 400px;
    margin: 0 auto;
}

.showcase__detail {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-muted);
    max-width: 400px;
    margin: 12px auto 0;
}

/* Dots and the pause control. */

.showcase__controls {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 10px;
}

.showcase__dots {
    display: flex;
    align-items: center;
    gap: 12px;
}

.showcase__dot {
    position: relative;
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--ink-faint);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.showcase__dot:hover,
.showcase__dot:focus-visible {
    background: var(--ink-muted);
    transform: scale(1.2);
}

.showcase__dot.is-active {
    background: var(--gold);
}

.showcase__dot:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* The sweep under the active dot, showing how much of the slide's time is left. Its duration is
   the slide interval in PlatformShowcase.razor.cs. The two are changed together or the bar lies. */
.showcase__dot-sweep {
    position: absolute;
    left: -2px;
    bottom: -7px;
    height: 2px;
    width: 0;
    background: var(--gold);
    border-radius: 1px;
    animation: showcase-sweep 6s linear forwards;
}

@keyframes showcase-sweep {
    to {
        width: 13px;
    }
}

.showcase__pause {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-muted);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.showcase__pause:hover,
.showcase__pause:focus-visible {
    color: var(--ink);
    border-color: var(--gold);
    background: rgba(232, 184, 75, 0.08);
}

.showcase__pause:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* The sign in variant. */

.showcase--signin {
    height: 100%;
    justify-content: center;
}

.showcase--signin .showcase__controls {
    position: absolute;
    bottom: 40px;
}

/* The console variant. */

.showcase--console {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    grid-template-areas:
        "stage launcher"
        "controls launcher";
    align-items: center;
    column-gap: 48px;
    row-gap: 8px;
    padding: 8px 0 28px;
}

.showcase--console .showcase__stage {
    grid-area: stage;
    max-width: none;
    height: 400px;
}

.showcase--console .showcase__controls {
    grid-area: controls;
    justify-content: center;
}

.showcase__launcher {
    grid-area: launcher;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The launcher cards. */

.launch-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* The gold rail down the leading edge. It is present at zero width on every card so that it
   grows rather than appearing, which stops the row shifting as the active card changes. */
.launch-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    transition: width 0.25s ease;
}

.launch-card:hover,
.launch-card:focus-visible,
.launch-card.is-active {
    border-color: rgba(232, 184, 75, 0.45);
    transform: translateX(4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.launch-card:hover::before,
.launch-card:focus-visible::before,
.launch-card.is-active::before {
    width: 3px;
}

.launch-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.launch-card__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--shell-800);
    border: 1px solid var(--hairline);
    color: var(--gold);
    transition: background 0.25s ease;
}

.launch-card:hover .launch-card__icon,
.launch-card.is-active .launch-card__icon {
    background: rgba(232, 184, 75, 0.12);
}

.launch-card__words {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.launch-card__title {
    font-family: InterSemiBold, "Inter", "Segoe UI", sans-serif;
    font-size: 15px;
    color: var(--ink);
}

.launch-card__caption {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-muted);
}

/* Drawn as a rotated border rather than as an icon, because every icon in this application comes
   from AppIcon and a chevron drawn here would be a second set starting. */
.launch-card__chevron {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-top: 1.6px solid var(--ink-faint);
    border-right: 1.6px solid var(--ink-faint);
    transform: rotate(45deg);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.launch-card:hover .launch-card__chevron,
.launch-card.is-active .launch-card__chevron {
    border-color: var(--gold);
    transform: rotate(45deg) translate(2px, -2px);
}

/* The console page around it. */

.console {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 4px 0 8px;
}

.console__hero {
    position: relative;
    z-index: 1;
    max-width: 780px;
}

.console__eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}

.console__headline {
    font-family: InterSemiBold, "Inter", "Segoe UI", sans-serif;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 14px;
}

.console__standfirst {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-muted);
    max-width: 62ch;
    margin: 0;
}

.console__greeting {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--ink-muted);
}

.console__greeting strong {
    font-weight: 600;
    color: var(--ink);
}

/* Narrower viewports. */

@media (max-width: 1180px) {
    .showcase--console {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "stage"
            "controls"
            "launcher";
        row-gap: 24px;
    }

    .showcase--console .showcase__stage {
        height: 360px;
    }

    .console__headline {
        font-size: 34px;
    }
}

/* Below this the sign in card needs the whole viewport, and a showcase squeezed in beside it
   reads as two half things rather than one. */
@media (max-width: 1024px) {
    .login-showcase {
        display: none;
    }
}

@media (max-width: 640px) {
    .showcase__medallion {
        width: 132px;
        height: 132px;
    }

    .showcase__title {
        font-size: 22px;
    }

    .console__headline {
        font-size: 28px;
    }
}

/* Reduced motion.

   Auto advance is already switched off in the component, which reads the same preference through
   afMotion. This covers the rest: the halo stops turning, the slide stops sliding, and the cards
   stop moving under the pointer. Nothing is hidden, so the content is identical either way. */

@media (prefers-reduced-motion: reduce) {
    .showcase__medallion-halo,
    .showcase__dot-sweep {
        animation: none;
    }

    .showcase__slide {
        transition: opacity 0.2s ease;
        transform: none;
    }

    .launch-card,
    .launch-card::before,
    .launch-card__icon,
    .launch-card__chevron,
    .showcase__dot {
        transition: none;
    }

    .launch-card:hover,
    .launch-card:focus-visible,
    .launch-card.is-active {
        transform: none;
    }

    .launch-card:hover .launch-card__chevron,
    .launch-card.is-active .launch-card__chevron {
        transform: rotate(45deg);
    }

    .showcase__dot:hover,
    .showcase__dot:focus-visible {
        transform: none;
    }
}


/* A grid whose rows are opened by a named button rather than by Radzen's chevron.

   Radzen renders that chevron as <a href="javascript:void(0)"> with no text and no label, so it
   takes a tab stop and is announced as "link". Where a column already carries a real button
   that says "Show routes" and names the row it belongs to, the chevron is a second control for
   the same job and the unnamed one. display:none takes it out of the tab order and out of the
   accessibility tree together, which neither aria-hidden nor tabindex does on its own.

   Scoped, not global: on a grid where the chevron is the only disclosure, hiding it would leave
   no way to open a row at all. */
.grid-disclosed-by-button .rz-col-icon,
.grid-disclosed-by-button .rz-unselectable-text.rz-col-icon {
    display: none;
}

/* ── My Details ──────────────────────────────────────────────────────────────────────────────
   The profile screen. Everything on it comes from the signed in administrator's own token.

   Contrast, measured against --surface-raised #13203a which is the panel these sit on:
       --ink        #f4f7fb   15.9:1    values, name
       --ink-muted  #9fb0c3    7.9:1    labels, the email line, the hint
   The status chips carry a tint at 0.14 alpha behind --ink, so the word is read at the same
   contrast as the value beside it and the colour only reinforces it. */

.profile {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 760px;
}

.profile__identity {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%);
}

.profile__avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--shell-800);
    border: 1px solid var(--hairline);
    color: var(--gold);
}

.profile__identity-words {
    min-width: 0;
}

.profile__name {
    font-family: InterSemiBold, "Inter", "Segoe UI", sans-serif;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
}

.profile__email {
    font-size: 14px;
    color: var(--ink-muted);
    margin: 4px 0 0;
}

.profile__facts {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}

.profile__fact {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 18px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--hairline);
}

.profile__fact:last-child {
    border-bottom: none;
}

.profile__fact dt {
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-muted);
}

.profile__fact dd {
    margin: 0;
    font-size: 14px;
    color: var(--ink);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.profile__chip,
.profile__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--ink);
    border: 1px solid var(--hairline);
    background: var(--surface-hover);
}

.profile__badge.is-good {
    border-color: rgba(74, 222, 128, 0.45);
    background: rgba(74, 222, 128, 0.14);
}

.profile__badge.is-warn {
    border-color: rgba(232, 184, 75, 0.45);
    background: rgba(232, 184, 75, 0.14);
}

/* The identifier is quoted when reporting a problem, so it is set in a monospace face where a
   1 and an l and an I are not the same shape. */
.profile__code {
    font-family: Consolas, "SF Mono", Menlo, monospace;
    font-size: 13px;
    color: var(--ink);
    background: var(--shell-800);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    padding: 2px 8px;
}

.profile__hint {
    flex-basis: 100%;
    font-size: 12.5px;
    color: var(--ink-muted);
}

.profile__footnote {
    font-size: 13px;
    color: var(--ink-muted);
    margin: 0;
}

.profile__footnote a {
    color: var(--gold);
}

@media (max-width: 700px) {
    .profile__fact {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

/* The session warning.

   It sits above everything, including Radzen overlays, because a dialog that has opened behind
   an open dialog is a warning nobody sees. z-index is above Radzen's 1100 range on purpose.

   Contrast on --surface-raised: --ink 15.9:1 for the heading and body, --gold 10.4:1 for the
   mark. Nothing here is --ink-muted: the whole point of this panel is that it is read. */
.session-expiry {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 7, 15, 0.72);
}

.session-expiry__sentinel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.session-expiry__panel {
    width: 100%;
    max-width: 480px;
    padding: 24px;
    border: 1px solid var(--hairline);
    border-top: 3px solid var(--status-warning);
    border-radius: 14px;
    background: var(--surface-raised);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.session-expiry__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.session-expiry__mark {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(232, 184, 75, 0.14);
    border: 1px solid rgba(232, 184, 75, 0.45);
    color: var(--gold);
}

.session-expiry__title {
    margin: 0;
    font-family: InterSemiBold, "Inter", "Segoe UI", sans-serif;
    font-size: 18px;
    color: var(--ink);
}

.session-expiry__body {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
}

.session-expiry__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}