/* The signed-out welcome page every rhys.wtf app shows at `/`
   (rhyswtf-apps, `welcome()`). Shared by all of them, so it reads only the
   tokens every app's stylesheet defines: the --gruvbox-* slots (which
   palettes.css redefines per palette), --color-*, --font-*, --radius and
   --spacing, with fallbacks where one app lacks one. Light and dark follow
   from those. Edit it in rhyswtf-web and sync, never in an app. */

.welcome {
    max-width: 54rem;
    margin: 1.5rem auto 3rem;
}

.welcome__intro {
    max-width: 38rem;
    margin: 0 auto;
    text-align: center;
}

.welcome__title {
    font-family: var(--font-display);
    font-weight: normal;
    /* rem plus a little of the width, so zooming the text still scales it
       (a size in vw alone doesn't). */
    font-size: clamp(2.25rem, 1.5rem + 3.75vw, 3.75rem);
    line-height: 1.05;
    color: var(--color-text-strong, var(--color-text));
    margin: 0 0 1rem;
    text-wrap: balance;
}

.welcome__lead {
    font-size: 1.25rem;
    line-height: 1.45;
    margin: 0 0 0.75rem;
    text-wrap: pretty;
}

.welcome__text {
    margin: 0;
    text-wrap: pretty;
}

.welcome__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.75rem 0 0.75rem;
}

/* rhys.wtf's buttons, a size up: Sign in filled with the text colour,
   Create an account outlined. */
.welcome__button {
    display: inline-block;
    min-width: 10rem;
    padding: 0.65rem 1.4rem;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border, var(--gruvbox-fg0));
    border-radius: var(--radius, 1rem);
}

.welcome__button:hover {
    color: var(--color-text);
    background: var(--gruvbox-bg0-soft);
}

.welcome__button--primary,
.welcome__button--primary:hover {
    color: var(--color-bg);
    background: var(--color-text);
    border-color: var(--color-text);
}

.welcome__button--primary:hover {
    background: var(--color-link-hover);
    border-color: var(--color-link-hover);
}

.welcome__note {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--color-muted);
    margin: 0;
}

/* An app's own part between the introduction and the apps (Diagrams'
   viewing code, Feeds' public reader). */
.welcome__extra {
    max-width: 38rem;
    margin: 2rem auto 0;
    text-align: center;
}

.welcome__heading {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 1.75rem;
    color: var(--color-text-strong, var(--color-text));
    margin: 3rem 0 1rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid var(--color-border, var(--gruvbox-fg0));
}

.welcome__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
}

/* A card per app; the whole card is its link (the name's ::after covers
   it), so the paragraph is clickable too. */
.welcome-card {
    position: relative;
    min-width: 0;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border, var(--gruvbox-fg0));
    border-radius: var(--radius, 1rem);
}

.welcome-card:hover,
.welcome-card:focus-within,
.welcome-card--here {
    box-shadow: inset 0 0 0 1px var(--color-border, var(--gruvbox-fg0));
}

.welcome-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin: 0 0 0.6rem;
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 1.4rem;
    line-height: 1.2;
}

.welcome-card__link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--color-text-strong, var(--color-text));
    text-decoration: none;
}

.welcome-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.welcome-card__link:hover {
    color: var(--color-link-hover);
}

.welcome-card__here {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 0.05rem 0.55rem;
    color: var(--color-muted);
    border: 1px solid currentColor;
    border-radius: 999px;
    white-space: nowrap;
}

.welcome-card__about {
    margin: 0;
    line-height: 1.5;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.welcome__also {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 1.25rem 0 0;
    font-size: 0.95rem;
    color: var(--color-muted);
}

/* The apps' icons, as in the apps menu, sized for the page. The colours
   are repeated here so the page doesn't depend on how an app sizes or
   colours its menu's icons. */
.welcome .app-icon {
    display: block;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
}

.welcome__also .app-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.welcome .app-icon__back { fill: var(--gruvbox-blue-faded); }
.welcome .app-icon--red .app-icon__back { fill: var(--gruvbox-red-faded); }
.welcome .app-icon--purple .app-icon__back { fill: var(--gruvbox-purple-faded); }
.welcome .app-icon--blue .app-icon__back { fill: var(--gruvbox-blue-faded); }
.welcome .app-icon--green .app-icon__back { fill: var(--gruvbox-green-faded); }
.welcome .app-icon--orange .app-icon__back { fill: var(--gruvbox-orange-faded); }
.welcome .app-icon--yellow .app-icon__back { fill: var(--gruvbox-yellow-faded); }
.welcome .app-icon--aqua .app-icon__back { fill: var(--gruvbox-aqua-faded); }
.welcome .app-icon--gray .app-icon__back { fill: var(--gruvbox-gray); }
.welcome .app-icon g { fill: var(--color-on-accent, #fbf1c7); }
.welcome .app-icon [stroke]:not([stroke="none"]) { stroke: var(--color-on-accent, #fbf1c7); }

@media (max-width: 30rem) {
    .welcome {
        margin-top: 0.5rem;
    }

    .welcome__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .welcome__heading {
        margin-top: 2.25rem;
    }
}