/*
 * The public link-in-bio page. Hand-written, no build step.
 * Designed for a phone inside Instagram's in-app browser first.
 */

/*
 * --accent and --accent-text are set by the page itself when an accent colour
 * was chosen in the page settings, together with --accent-dark and
 * --accent-dark-text for the dark theme: the same colour, made lighter when it
 * would not stand out from the dark background. Without an accent colour, the
 * buttons keep the plain black-on-white look, inverted in dark mode.
 */
:root {
    --background: #ffffff;
    --surface: #fafafa;
    --text: #111827;
    --muted: #6b7280;
    --line: #e5e7eb;
    --button: var(--accent, #111827);
    --button-text: var(--accent-text, #ffffff);
    --button-outline: var(--accent, var(--line));
    --tile-ratio: 4 / 5;
    /* An Instagram profile's 935px on a computer, plus 24px of room on each side. */
    --page-width: 983px;
    color-scheme: light;
}

/*
 * The theme follows the device unless the guest picked one with the theme
 * switch, which sets data-theme="light" or "dark" on <html>.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --background: #0b0b0c;
        --surface: #141416;
        --text: #f3f4f6;
        --muted: #9ca3af;
        --line: #27272a;
        --button: var(--accent-dark, #f3f4f6);
        --button-text: var(--accent-dark-text, #111827);
        --button-outline: var(--accent-dark, var(--line));
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --background: #0b0b0c;
    --surface: #141416;
    --text: #f3f4f6;
    --muted: #9ca3af;
    --line: #27272a;
    --button: var(--accent-dark, #f3f4f6);
    --button-text: var(--accent-dark-text, #111827);
    --button-outline: var(--accent-dark, var(--line));
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.45;
}

/*
 * The page runs across the whole screen; its header, grid and buttons keep
 * to --page-width.
 */
.page {
    padding-bottom: 32px;
}

/*
 * The System / Light / Dark switch in the top corner, kept quiet so it does
 * not compete with the page. It stays hidden until the script can make it
 * work. Each choice shows a small circle but takes taps across a larger
 * area, the full 44px on touch screens.
 */
.theme-switch {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
}

.theme-switch[hidden] {
    display: none;
}

.theme-switch button {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

@media (pointer: coarse) {
    .theme-switch button {
        width: 44px;
        height: 44px;
    }
}

.theme-switch button::before {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.theme-switch button[aria-pressed="true"] {
    color: var(--text);
}

.theme-switch button[aria-pressed="true"]::before {
    background: var(--line);
}

@media (hover: hover) {
    .theme-switch button:hover {
        color: var(--text);
    }
}

.theme-switch svg {
    position: relative;
    width: 16px;
    height: 16px;
}

/*
 * The header, laid out like an Instagram profile: a band across the screen
 * with a line under it, the picture beside the name, and the description and
 * buttons below them on a phone, or beside the picture on a wider screen.
 * The marketing site's phone drawing uses the same markup.
 */
.profile {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.profile__inner {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 18px;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 48px 16px 20px;
}

.profile__inner--no-picture {
    grid-template-columns: minmax(0, 1fr);
}

.profile__picture {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
}

.profile__identity {
    grid-row: 1;
    grid-column: -2 / -1;
}

.profile__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.profile__username {
    margin: 2px 0 0;
    color: var(--muted);
}

.profile__username a {
    color: inherit;
    text-decoration: none;
}

.profile__username a:hover {
    text-decoration: underline;
}

.profile__description {
    grid-column: 1 / -1;
    margin: 14px 0 0;
    white-space: pre-line;
}

.profile__buttons {
    display: flex;
    flex-flow: row wrap;
    grid-column: 1 / -1;
    gap: 8px;
    margin-top: 16px;
}

.profile__buttons .button {
    flex: 1 1 140px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
}

/*
 * On a wider screen everything goes beside the picture. Only the page itself
 * does this: the marketing site's phone drawing uses the same header and
 * keeps the phone layout on any screen.
 */
@media (min-width: 736px) {
    .page .profile__inner {
        grid-template-columns: 150px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        align-items: start;
        column-gap: 48px;
        padding: 56px 24px 36px;
    }

    .page .profile__inner--no-picture {
        grid-template-columns: minmax(0, 1fr);
    }

    .page .profile__picture {
        grid-row: 1 / span 3;
        width: 150px;
        height: 150px;
    }

    .page .profile__identity {
        padding-top: 12px;
    }

    .page .profile__name {
        font-size: 1.5rem;
        font-weight: 600;
    }

    .page .profile__description,
    .page .profile__buttons {
        grid-column: -2 / -1;
    }

    .page .profile__buttons .button {
        flex: 0 1 auto;
        min-width: 160px;
    }
}

/*
 * The heading of the grid, drawn like the Posts tab of an Instagram profile:
 * its line sits on the line under the header.
 */
.tabs {
    display: flex;
    justify-content: center;
    margin: 0 0 2px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: -1px;
    padding: 14px 4px;
    border-top: 1px solid var(--text);
}

.tabs svg {
    width: 12px;
    height: 12px;
}

.button {
    display: block;
    padding: 13px 18px;
    border-radius: 10px;
    background: var(--button);
    color: var(--button-text);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.button--quiet {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--button-outline);
}

/*
 * Feedback on buttons and tiles: a slight fade under the pointer and a
 * small press when tapped. Fading works whatever the accent colour is.
 */
.button,
.tile a {
    -webkit-tap-highlight-color: transparent;
    transition: opacity 120ms ease, transform 120ms ease;
}

@media (hover: hover) {
    .button:hover,
    .tile a:hover {
        opacity: 0.85;
    }

    .button--quiet:hover {
        background: var(--line);
        opacity: 1;
    }
}

.button:active {
    transform: scale(0.98);
}

.tile a:active {
    opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
    .button,
    .tile a {
        transition: none;
    }

    .button:active {
        transform: none;
    }
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * The page's own grid runs edge to edge on a phone, as in the Instagram app,
 * and keeps to the width of the header on a wider screen.
 */
.page > .grid {
    max-width: var(--page-width);
    margin: 0 auto;
}

@media (min-width: 736px) {
    .page > .grid {
        gap: 4px;
        padding: 0 24px;
    }
}

.tile a {
    position: relative;
    display: block;
    aspect-ratio: var(--tile-ratio);
    background: var(--line);
    overflow: hidden;
}

.tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tile__kind {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    background: center / contain no-repeat;
    filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.55));
}

.tile__kind--reel,
.tile__kind--video {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.14v13.72a1 1 0 0 0 1.53.85l10.79-6.86a1 1 0 0 0 0-1.7L9.53 4.29A1 1 0 0 0 8 5.14z'/%3E%3C/svg%3E");
}

.tile__kind--carousel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 3h12a2 2 0 0 1 2 2v12h-2V5H7V3z'/%3E%3Crect x='3' y='7' width='14' height='14' rx='2'/%3E%3C/svg%3E");
}

.more {
    max-width: 360px;
    margin: 24px auto;
    padding: 0 20px;
}

.button[aria-busy="true"] {
    cursor: progress;
    opacity: 0.6;
}

/*
 * Read out by screen readers, not shown.
 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.empty {
    margin: 40px 24px;
    color: var(--muted);
    text-align: center;
}

.empty a {
    display: block;
    margin-top: 8px;
    color: var(--text);
}

/*
 * Where the page came from, in a quiet line under the grid: the one way
 * from a page to the site that makes them.
 */
.made-with {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 8px 24px 32px;
    color: var(--muted);
    font-size: 0.8125rem;
    text-align: center;
}

.made-with p {
    margin: 0;
}

.made-with a {
    color: inherit;
}

/*
 * The error pages: a short message and one way on.
 */
.message {
    padding: 72px 24px;
    text-align: center;
}

.message__heading {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
}

.message__text {
    max-width: 32em;
    margin: 8px auto 24px;
    color: var(--muted);
}

.message__button {
    display: inline-block;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}