/* Get Started hero (GetStartedHub.razor, FullPage variant — /setup).
   Implements design "6a — Photo header per card" from the DEFEX First-Run Onboarding
   design doc: a photographic collage hero banner with a greeting + stat pills, three
   step cards each with a photo header and step number, and a video-walkthrough strip.

   Colours are held in scoped custom properties (matching the tokens already used by
   setup-banner.css / nav-menu.css) so the page matches the DEFEX design system and
   still flips for dark mode. */

.gsh {
    /* Design tokens (light) */
    --gsh-primary: #0F172B;
    --gsh-accent: #155DFC;
    --gsh-accent-2: #7FA8FF;
    --gsh-fg-2: #4B5563;
    --gsh-fg-3: #6B7280;
    --gsh-border: #DEE2ED;
    --gsh-border-strong: #C5CCD9;
    --gsh-surface: #fff;
    --gsh-surface-2: #F4F6FA;
    --gsh-success-bg: rgba(0, 126, 51, 0.2);
    --gsh-success-border: rgba(0, 126, 51, 0.55);
    --gsh-success-fg: #5FD68F;
    --gsh-done-fg: #007E33;
}

.defex-theme-dark .gsh,
.mud-theme-dark .gsh {
    --gsh-primary: #0073EA;
    --gsh-accent: #0073EA;
    --gsh-accent-2: #8FB6FF;
    --gsh-fg-2: rgba(255, 255, 255, 0.80);
    --gsh-fg-3: rgba(255, 255, 255, 0.60);
    --gsh-border: rgba(255, 255, 255, 0.14);
    --gsh-border-strong: rgba(255, 255, 255, 0.26);
    --gsh-surface: var(--mud-palette-surface);
    --gsh-surface-2: rgba(255, 255, 255, 0.04);
    --gsh-success-bg: rgba(0, 168, 79, 0.18);
    --gsh-success-border: rgba(0, 168, 79, 0.5);
    --gsh-success-fg: #5FD68F;
    --gsh-done-fg: #3FCB78;
}

/* ---------- Hero banner ---------- */

.gsh-hero {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: var(--gsh-primary);
    min-height: 196px;
}

.gsh-hero__collage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 6px;
}

.gsh-hero__cell {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    animation: gsh-pop 460ms var(--gsh-d, 0ms) cubic-bezier(0, 0, 0.2, 1) both;
}

    .gsh-hero__cell img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        animation: gsh-kb var(--gsh-kb-dur, 24s) var(--gsh-kb-delay, 0s) ease-in-out infinite alternate;
    }

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

    .gsh-hero__sweep::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 120px;
        top: -120px;
        background: linear-gradient(rgba(21, 93, 252, 0), rgba(21, 93, 252, 0.22), rgba(21, 93, 252, 0));
        animation: gsh-sweep 5s 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

.gsh-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--gsh-primary) 30%, rgba(15, 23, 43, 0.82) 58%, rgba(15, 23, 43, 0.5));
    display: flex;
    align-items: center;
    padding: 28px 30px;
}

.gsh-hero__content {
    max-width: 560px;
}

.gsh-hero__eyebrow {
    font: 500 10.5px var(--font-base, inherit);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--gsh-accent-2);
    animation: gsh-fu 400ms 160ms cubic-bezier(0, 0, 0.2, 1) both;
}

.gsh-hero__title {
    font: 600 26px/1.25 var(--font-base, inherit);
    color: #fff;
    margin-top: 8px;
    letter-spacing: -0.005em;
    animation: gsh-fu 460ms 260ms cubic-bezier(0, 0, 0.2, 1) both;
}

.gsh-hero__pills {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.gsh-pill {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 5px 12px;
    color: #fff;
    font: 400 12px var(--font-base, inherit);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    animation: gsh-fu 400ms var(--gsh-d, 380ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.gsh-pill .mud-icon-root {
    font-size: 15px !important;
    color: var(--gsh-accent-2);
}

.gsh-pill strong {
    font-weight: 600;
}

.gsh-pill--success {
    background: var(--gsh-success-bg);
    border-color: var(--gsh-success-border);
}

.gsh-hero__pills .gsh-pill:nth-child(1) { animation-delay: 380ms; }
.gsh-hero__pills .gsh-pill:nth-child(2) { animation-delay: 440ms; }
.gsh-hero__pills .gsh-pill:nth-child(3) { animation-delay: 500ms; }
.gsh-hero__pills .gsh-pill:nth-child(4) { animation-delay: 560ms; }

    .gsh-pill--success .mud-icon-root {
        color: var(--gsh-success-fg);
    }

/* ---------- Step cards ---------- */

.gsh-steps-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    animation: gsh-fu 380ms 100ms cubic-bezier(0, 0, 0.2, 1) both;
}

.gsh-steps-head__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.gsh-steps {
    display: flex;
    gap: 14px;
    align-items: stretch;
    flex-wrap: wrap;
}

.gsh-card {
    flex: 1 1 260px;
    background: var(--gsh-surface);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: gsh-fu 420ms var(--gsh-d, 0ms) cubic-bezier(0, 0, 0.2, 1) both;
    transition: box-shadow 120ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .gsh-card:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    }

.gsh-card--primary {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

    .gsh-card--primary:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }

.gsh-card__photo {
    height: 118px;
    flex: 0 0 118px;
    position: relative;
    overflow: hidden;
    background: var(--gsh-primary);
}

    .gsh-card__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        animation: gsh-kb var(--gsh-kb-dur, 30s) var(--gsh-kb-delay, 0s) ease-in-out infinite alternate;
    }

.gsh-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(15, 23, 43, 0.15), rgba(15, 23, 43, 0.78));
}

.gsh-card__num {
    position: absolute;
    left: 14px;
    top: 12px;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--gsh-primary);
    font: 600 15px var(--font-base, inherit);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gsh-card--primary .gsh-card__num {
    background: var(--gsh-accent);
    color: #fff;
}

.gsh-card__status {
    position: absolute;
    right: 12px;
    top: 14px;
    font: 400 11px var(--font-base, inherit);
    color: rgba(255, 255, 255, 0.8);
}

.gsh-card__flag {
    position: absolute;
    right: 12px;
    top: 12px;
    background: var(--gsh-accent);
    color: #fff;
    border-radius: 999px;
    padding: 3px 9px;
    font: 500 10.5px var(--font-base, inherit);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gsh-card__photo-title {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    font: 600 17px var(--font-base, inherit);
    color: #fff;
}

.gsh-card__body {
    padding: 13px 16px 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.gsh-card__blurb {
    font: 400 12.5px var(--font-base, inherit);
    color: var(--gsh-fg-3);
}

.gsh-card__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.gsh-card__task {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 12.5px var(--font-base, inherit);
    color: var(--gsh-fg-2);
    cursor: pointer;
}

    .gsh-card__task:hover {
        color: var(--gsh-primary);
    }

    .gsh-card__task .mud-icon-root {
        font-size: 17px !important;
        color: var(--gsh-border-strong);
    }

.gsh-card__task--done {
    color: var(--gsh-fg-3);
}

    .gsh-card__task--done .mud-icon-root {
        color: var(--gsh-done-fg) !important;
    }

.gsh-card__spacer {
    flex: 1;
}

.gsh-card__bar {
    height: 4px;
    border-radius: 2px;
    background: var(--gsh-border);
    margin-top: 14px;
    overflow: hidden;
}

.gsh-card__bar-fill {
    height: 100%;
    width: var(--gsh-pct, 0%);
    background: var(--gsh-primary);
    animation: gsh-bar-fill 900ms 500ms cubic-bezier(0, 0, 0.2, 1) both;
}

.gsh-card--primary .gsh-card__bar-fill {
    background: var(--gsh-accent);
}

.gsh-card__foot {
    display: flex;
    align-items: center;
    margin-top: 10px;
    gap: 8px;
}

.gsh-card__fraction {
    font: 400 11.5px var(--font-base, inherit);
    color: var(--gsh-fg-3);
}

.gsh-card__continue {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gsh-primary);
    font: 500 12.5px var(--font-base, inherit);
    letter-spacing: 0.028em;
    text-transform: uppercase;
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

    .gsh-card__continue .mud-icon-root {
        font-size: 17px !important;
    }

.gsh-card__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.gsh-card__import {
    background: var(--gsh-accent);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 7px 14px;
    font: 500 12.5px var(--font-base, inherit);
    letter-spacing: 0.028em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

    .gsh-card__import:hover {
        background: #0F4AE0;
    }

    .gsh-card__import .mud-icon-root {
        font-size: 16px !important;
    }

.gsh-card__manual {
    color: var(--gsh-primary);
    font: 500 12.5px var(--font-base, inherit);
    letter-spacing: 0.028em;
    text-transform: uppercase;
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
    padding: 7px 6px;
}

/* ---------- Video CTA strip ---------- */

.gsh-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    background: var(--gsh-surface);
    border: 1px solid var(--gsh-border);
    border-radius: 5px;
    padding: 12px 16px;
    cursor: pointer;
    transition: box-shadow 120ms cubic-bezier(0.4, 0, 0.2, 1);
    animation: gsh-fu 420ms 200ms cubic-bezier(0, 0, 0.2, 1) both;
}

    .gsh-cta:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    }

.gsh-cta__icon .mud-icon-root {
    font-size: 34px !important;
    color: var(--gsh-accent);
}

.gsh-cta__text {
    flex: 1;
}

.gsh-cta__title {
    font: 600 14px var(--font-base, inherit);
    color: var(--gsh-primary);
}

.gsh-cta__subtitle {
    font: 400 12px var(--font-base, inherit);
    color: var(--gsh-fg-3);
    margin-top: 2px;
}

.gsh-cta__action {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gsh-accent);
    font: 500 12.5px var(--font-base, inherit);
    letter-spacing: 0.028em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .gsh-cta__action .mud-icon-root {
        font-size: 17px !important;
    }

/* ---------- Keyframes ---------- */

@keyframes gsh-fu {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes gsh-pop {
    0%   { opacity: 0; transform: scale(0.6); }
    60%  { transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes gsh-kb {
    from { transform: scale(1.04); }
    to   { transform: scale(1.14) translate(-2%, -1.5%); }
}

@keyframes gsh-sweep {
    from { transform: translateY(-100%); }
    to   { transform: translateY(220%); }
}

@keyframes gsh-bar-fill {
    from { width: 0; }
    to   { width: var(--gsh-pct, 0%); }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .gsh-steps {
        flex-direction: column;
    }

    .gsh-hero__scrim {
        padding: 22px 20px;
    }

    .gsh-hero__title {
        font-size: 21px;
    }
}

@media (max-width: 640px) {
    .gsh-hero__collage {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gsh-hero__cell,
    .gsh-hero__cell img,
    .gsh-hero__sweep::after,
    .gsh-hero__eyebrow,
    .gsh-hero__title,
    .gsh-pill,
    .gsh-steps-head,
    .gsh-card,
    .gsh-card__photo img,
    .gsh-card__bar-fill,
    .gsh-cta {
        animation: none !important;
    }
}

/* --- Get Started onboarding dialogs ---------------------------------------
   Chrome for the focused dialogs the checklist rows open (brand & logo, business
   hours, accounting codes, labour rates, service regions). Lives here rather than
   in dialogs.css because it belongs to the Get Started journey, not to dialogs in
   general. Colours come from Mud theme vars so both themes are covered. */

.setup-dlg-intro {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: 8px;
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
}

.setup-dlg-intro__text {
    display: block;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

.setup-dlg-intro__hint {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* One row per weekday in the business-hours dialog. The day name is a fixed column
   so the two time pickers line up down the week instead of stepping in and out. */
.setup-hours-row__day {
    flex: 0 0 96px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

@media (max-width: 600px) {
    .setup-hours-row {
        flex-wrap: wrap;
    }

    .setup-hours-row__day {
        flex-basis: 100%;
        font-weight: 500;
    }
}

/* A checklist row the signed-in user has no permission to action. Kept visible (it is still
   real, outstanding setup someone must do) but clearly not theirs to click. */
.gsh-card__task--locked {
    cursor: default;
    opacity: 0.55;
}

.gsh-card__task--locked:hover {
    background: none;
}

/* --- Brand & logo dialog ---------------------------------------------------
   The branding upload/preview styles live in page-level <HeadContent> blocks inside
   Tenant.razor and Business.razor, which never render on /setup - so the dialog's dropzone
   would otherwise fall back to a raw native file input with unstacked text. These are scoped
   under .setup-brand-dialog so they cannot leak into either of those pages, and so they are
   trivial to delete once the shared BrandingEditor lands. Sized smaller than the page
   versions because this is a Small dialog, not a full settings tab. */

.setup-brand-dialog .branding-preview-logo,
.setup-brand-dialog .branding-preview-logo-placeholder {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    border-radius: 12px;
}

.setup-brand-dialog .branding-preview-logo {
    object-fit: contain;
    display: block;
    background: #ffffff;
}

.setup-brand-dialog .branding-preview-logo-placeholder {
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    font-weight: 700;
}

/* Drag and drop is the native input's own behaviour, so the input must be rendered
   (Hidden="false") and stretched invisibly over the dropzone. Without this the browser has no
   drop target and just opens the dropped image in a new tab. */
.setup-brand-dialog .branding-upload-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.setup-brand-dialog .branding-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}

.setup-brand-dialog .branding-upload-dropzone {
    width: 100%;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.9rem;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.setup-brand-dialog .branding-upload-dropzone:hover {
    border-color: var(--mud-palette-primary);
}

.setup-brand-dialog .branding-upload-dragover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.setup-brand-dialog .branding-upload-uploading {
    pointer-events: none;
    opacity: 0.7;
    border-color: var(--mud-palette-primary);
}

.setup-brand-dialog .branding-upload-icon-shell {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

/* Both spans are inline by default, which runs the helper straight on from the title. */
.setup-brand-dialog .branding-upload-title,
.setup-brand-dialog .branding-upload-helper {
    display: block;
    line-height: 1.4;
}

.setup-brand-dialog .branding-upload-title {
    font-size: 0.875rem;
    font-weight: 500;
}

.setup-brand-dialog .branding-upload-helper {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.setup-brand-dialog .branding-colour-swatch {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
}

.setup-brand-dialog .branding-colour-picker {
    max-width: 240px;
}

/* --- Delegating a step ------------------------------------------------------
   The trailing affordance on a checklist row: a person-add button while nobody owns the step,
   the assignee's initials once someone does. It sits inside the row (which is itself clickable
   and runs the step), so the markup stops propagation - these styles only have to keep the two
   targets visually distinct. */

.gsh-card__assign {
    margin-left: auto;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    padding: 0;
    border: 1px dashed var(--gsh-border-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--gsh-fg-3);
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

    .gsh-card__assign:hover {
        border-color: var(--gsh-primary);
        color: var(--gsh-primary);
        background: var(--gsh-surface-2);
    }

    .gsh-card__assign .mud-icon-root {
        font-size: 14px !important;
        color: inherit !important;
    }

/* Assigned: a solid chip, so "someone owns this" reads at a glance down the list. */
.gsh-card__assign--set {
    border-style: solid;
    border-color: var(--gsh-primary);
}

.gsh-card__avatar {
    display: inline-grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--gsh-primary);
    color: #fff;
    font: 600 9.5px/1 var(--font-base, inherit);
    letter-spacing: 0.02em;
}

/* --- Ticking a step off by hand ---------------------------------------------
   Sits beside the assign button on the same row. Deliberately quieter than the assign affordance
   at rest - it's an escape hatch, not the thing we want people reaching for first - and only turns
   green on hover. The reopen variant is shown on a row that is green ONLY because it was ticked,
   so it reads as the one undoable completion in the list. */

.gsh-card__mark {
    margin-left: 6px;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--gsh-fg-3);
    opacity: 0.55;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease, opacity 140ms ease;
}

    /* The row is the hover target, so the button surfaces with it rather than only on its own. */
    .gsh-card__task:hover .gsh-card__mark,
    .onboarding-step:hover .gsh-card__mark {
        opacity: 1;
    }

    .gsh-card__mark:hover {
        border-color: var(--mud-palette-success);
        color: var(--mud-palette-success);
        background: var(--gsh-surface-2);
        opacity: 1;
    }

    .gsh-card__mark .mud-icon-root {
        font-size: 14px !important;
        color: inherit !important;
    }

/* Already ticked by hand: always visible (it is the only way back) and reading as an undo. */
.gsh-card__mark--manual {
    opacity: 1;
    border-style: dashed;
    border-color: var(--gsh-border-strong);
}

    .gsh-card__mark--manual:hover {
        border-color: var(--gsh-primary);
        color: var(--gsh-primary);
    }

/* The "you were asked to do this" strip shown when a delegated To Do deep-links into a step. */
.gsh-arrival__lead {
    font-weight: 600;
    margin-right: 4px;
}