/* ============================================================
   Components — reusable primitives.
   Buttons, cards, chips, avatars, inputs, badges.
   ============================================================ */

/* ---- Buttons ---- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--fs-base);
    line-height: 1;
    letter-spacing: -0.005em;
    transition: transform var(--dur-fast) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
    user-select: none;
    white-space: nowrap;
}

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

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

.btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-1);
}

.btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-2);
    color: var(--accent-ink);
}

.btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
}

.btn-secondary:hover {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--ink-4);
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    padding-inline: var(--sp-3);
}

.btn-ghost:hover {
    background: var(--surface-2);
    color: var(--ink);
}

/* Light outlined button — secondary actions that shouldn't compete with primary. */
.btn-outline {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
}

.btn-outline:hover {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--ink-4);
}

.btn-lg {
    padding: var(--sp-5) var(--sp-8);
    font-size: var(--fs-lg);
}

.btn-sm {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
}

.btn-block {
    width: 100%;
}

/* ---- Cards ---- */

.card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--sp-5);
    box-shadow: var(--shadow-1);
    border: 1px solid var(--line);
}

.card-lg { padding: var(--sp-6); border-radius: var(--radius-2xl); }

/* ---- Chips (industries, filters) ---- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    border: 1px solid transparent;
}

.chip-accent {
    background: var(--accent-soft);
    color: var(--accent);
}

.chip-outline {
    background: transparent;
    border-color: var(--line);
}

/* ---- Avatars ---- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-3);
    font-weight: 600;
    overflow: hidden;
    flex: none;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Photos in round frames are pinned to the frame instead of being flex
   items, so no browser can stretch or squeeze them (older Android
   browsers size images inside flex boxes differently). */
.avatar,
.app-header-avatar,
.bc-face,
.msg-avatar,
.card-page-photo,
.card-edit-photo-preview,
.ob-photo-circle {
    position: relative;
    flex-shrink: 0;
}
.avatar > img,
.app-header-avatar > img,
.bc-face > img,
.msg-avatar > img,
.card-page-photo > img,
.card-edit-photo-preview > img,
.ob-photo-circle > img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

.avatar-sm { width: 32px;  height: 32px;  font-size: var(--fs-xs); }
.avatar-md { width: 48px;  height: 48px;  font-size: var(--fs-base); }
.avatar-lg { width: 72px;  height: 72px;  font-size: var(--fs-lg); }
.avatar-xl { width: 96px;  height: 96px;  font-size: var(--fs-xl); }

/* ---- Form inputs ---- */

.input, .textarea, .select {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    /* Explicit 16px minimum: iOS Safari zooms into fields with a smaller
       computed font-size, which is what makes web forms feel like websites.
       This one line kills that behavior across every input in the app. */
    font-size: 16px;
    line-height: 1.4;
    -webkit-appearance: none;   /* strip default iOS input chrome */
    appearance: none;
    transition: border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.textarea { min-height: 96px; resize: vertical; }

.label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-2);
    margin-bottom: var(--sp-2);
}

/* ---- Badges ---- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1;
}

.badge-pro {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* ---- Ryfa Pro badge (Sep 29, 2026) ----
   Next to a Pro member's name on the Home card and on their public card.
   Same black pill as the Board's PRO tag and the Upgrade page's badge. */
.pro-badge {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--ink);
    color: var(--paper);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}
a.pro-badge:hover, a.pro-badge:focus-visible { color: var(--paper); }

/* ---- Divider ---- */

.divider {
    height: 1px;
    background: var(--line);
    border: none;
    margin: var(--sp-4) 0;
}

/* ---- Ryfa logo mark ---- */

.logo {
    display: inline-block;
    height: 32px;
    width: auto;
}

.logo-lg { height: 56px; }
.logo-xl { height: 88px; }

/* Logo variants are swapped natively via <picture> + prefers-color-scheme
   in the markup (see index.php). Dedicated PNGs, no filter hacks. */

/* ---- Dialog (native <dialog> element) ---- */

.dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    border: none;
    border-radius: var(--radius-2xl);
    background: var(--surface);
    color: var(--ink);
    max-width: 440px;
    width: calc(100% - 32px);
    padding: 0;
    box-shadow: var(--shadow-3);
    overflow: visible;
}

.dialog::backdrop {
    background: rgba(20, 14, 8, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.dialog[open] {
    animation: dialog-in var(--dur) var(--ease-out);
}

@keyframes dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.dialog-inner {
    padding: var(--sp-6);
}

.dialog-close {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur) var(--ease-out);
    z-index: 1;
}

.dialog-close:hover {
    background: var(--line);
    color: var(--ink);
}

/* ---- Waitlist form (inside dialog) ---- */

.waitlist-form {
    margin-top: var(--sp-5);
}

.waitlist-input-row {
    display: flex;
    gap: var(--sp-2);
}

.waitlist-input-row .input {
    flex: 1;
    min-width: 0;
}

.waitlist-status {
    min-height: 20px;
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--ink-3);
}

.waitlist-status.is-error   { color: var(--danger); }
.waitlist-status.is-success { color: var(--success); }