/* =============================================================================
   Welcome focus picker (/welcome) — the first-login "what do you handle?" grid.

   Design source: Claude Design project 44fbb418-d9cc-4738-b2d7-c9334771f504,
   "Onboarding Focus Picker.dc.html", option 1b — icon tile grid, one plane, navy
   fill on select.

   THE MOCK'S HEX LITERALS ARE DELIBERATELY NOT COPIED. Its #0F172B is this
   theme's --mud-palette-primary and its #155DFC is --mud-palette-secondary (the
   palette roles are not what the mock's labels imply: "primary" there is the blue
   call to action, which is Color.Secondary here). Writing the hex would paint a
   hard navy slab over the dark and red palettes, which have their own primary.

   Global sheet, not scoped CSS: *.razor.css files are dead in this project.
   ========================================================================== */

.welcome-focus-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.welcome-focus-card {
    width: 100%;
    max-width: 900px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    overflow: hidden;
}

/* ---- Head ---------------------------------------------------------------- */

.welcome-focus-head {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 36px 36px 0;
}

.welcome-focus-intro {
    flex: 1;
    min-width: 0;
}

.welcome-focus-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 10px;
}

.welcome-focus-title {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--mud-palette-text-primary);
    margin: 0 0 8px;
}

.welcome-focus-sub {
    font-size: 14px;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0;
    max-width: 56ch;
}

/* The "select all that apply" hint. Tinted from the palette rather than the
   mock's #EFF6FF / #B8D5F9 pair so it survives a dark palette. */
.welcome-focus-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-secondary) 8%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 28%, transparent);
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-secondary);
}

.welcome-focus-pill .mud-icon-root {
    font-size: 16px;
    color: var(--mud-palette-secondary);
}

/* ---- Count + select-all -------------------------------------------------- */

.welcome-focus-tally {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.welcome-focus-count {
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    color: var(--mud-palette-secondary);
}

.welcome-focus-count-label {
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ---- Tile grid ----------------------------------------------------------- */

.welcome-focus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 26px 36px 30px;
}

.welcome-focus-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Explicit, because the UA stylesheet centres a <button>'s content on both axes. Without
       this the icon, title and description all sit centred and only the text-align below
       appears to do anything — which reads as a design choice rather than a bug. */
    align-items: flex-start;
    gap: 9px;
    min-height: 112px;
    padding: 16px 16px 15px;
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 5px;
    background: var(--mud-palette-surface);
    font-family: inherit;
    transition: background-color 120ms cubic-bezier(.4, 0, .2, 1),
                border-color 120ms cubic-bezier(.4, 0, .2, 1);
}

.welcome-focus-tile:focus-visible {
    outline: 2px solid var(--mud-palette-secondary);
    outline-offset: 2px;
}

.welcome-focus-tile-title {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.welcome-focus-tile-desc {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.welcome-focus-tile-icon.mud-icon-root {
    font-size: 24px;
    color: var(--mud-palette-text-secondary);
}

.welcome-focus-tile-tick.mud-icon-root {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 18px;
    color: var(--mud-palette-lines-inputs);
}

/* Selected: the whole tile fills, which is what makes the grid readable at a
   glance rather than a field of near-identical outlined boxes. */
.welcome-focus-tile.selected {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.welcome-focus-tile.selected .welcome-focus-tile-title {
    color: var(--mud-palette-primary-text);
}

.welcome-focus-tile.selected .welcome-focus-tile-desc {
    color: color-mix(in srgb, var(--mud-palette-primary-text) 62%, transparent);
}

.welcome-focus-tile.selected .welcome-focus-tile-icon.mud-icon-root {
    color: var(--mud-palette-secondary);
}

.welcome-focus-tile.selected .welcome-focus-tile-tick.mud-icon-root {
    color: var(--mud-palette-primary-text);
}

/* In the dark palette --mud-palette-primary and --mud-palette-secondary are the SAME blue
   (#0073EA), so the rule above paints the icon in the tile's own fill colour and it vanishes
   the moment the tile is selected. Nothing else on the card has this problem because nothing
   else puts secondary on top of primary. The marker class is what MainLayout stamps on the
   container the pages render inside (mud-theme-dark is its mobile-preview equivalent) — the
   web host never adds a theme class of its own, so there is nothing else to hang this off. */
.defex-theme-dark .welcome-focus-tile.selected .welcome-focus-tile-icon.mud-icon-root,
.mud-theme-dark .welcome-focus-tile.selected .welcome-focus-tile-icon.mud-icon-root {
    color: var(--mud-palette-primary-text);
}

/* Hover lift is decoration, so it is opt-in for anyone who has not asked for
   less motion. The colour cues above carry the state on their own. */
@media (prefers-reduced-motion: no-preference) {
    .welcome-focus-tile:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .06);
    }

    .welcome-focus-tile:not(.selected):hover .welcome-focus-tile-icon.mud-icon-root {
        color: var(--mud-palette-secondary);
    }
}

/* ---- Footer -------------------------------------------------------------- */

.welcome-focus-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 36px;
    background: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.welcome-focus-footer-note {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.welcome-focus-footer .mud-icon-root {
    font-size: 18px;
    color: var(--mud-palette-text-secondary);
}

.welcome-focus-spacer {
    flex: 1;
}

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

@media (max-width: 900px) {
    .welcome-focus-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 22px 24px 26px;
    }

    .welcome-focus-head {
        padding: 28px 24px 0;
    }

    .welcome-focus-footer {
        padding: 16px 24px;
    }
}

@media (max-width: 600px) {
    .welcome-focus-grid {
        grid-template-columns: 1fr;
    }

    /* The tally column stops earning its width on a phone: it wraps under the
       copy rather than squeezing the heading to two words a line. */
    .welcome-focus-head {
        flex-direction: column;
        gap: 16px;
    }

    .welcome-focus-tally {
        flex-direction: row;
        align-items: center;
        align-self: stretch;
        gap: 10px;
    }

    .welcome-focus-title {
        font-size: 24px;
    }

    .welcome-focus-footer {
        flex-wrap: wrap;
    }
}

/* Screen-reader-only live region for the selected count. Not MudBlazor's — it has no
   guaranteed visually-hidden utility, and a missing class here would print the text. */
.welcome-focus-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}