/* Phone-friendly rules for settings, team, sheets, licence and sign-in screens. */

.btn-big {
    display: block;
    width: 100%;
    min-height: 52px;
    font-size: 17px;
    font-weight: 600;
}

.table-scroll,
.pages-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.team-page,
.page-licence {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.page-licence .licence-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 460px;
    padding: 16px;
}

.page-licence .licence-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

input, select, textarea {
    box-sizing: border-box;
    max-width: 100%;
}

.page-licence .licence-form input {
    width: 100%;
    box-sizing: border-box;
}

.page-licence .form-error {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fde7e7;
    color: #8a1f1f;
}

.login-card .btn--ghost {
    display: block;
    min-height: 48px;
    text-align: center;
    padding: 14px 16px;
}

@media (max-width: 640px) {
    .team-page input[type="text"],
    .team-page input[type="email"],
    .team-page input[type="month"],
    .team-page input[type="search"],
    .team-page input[type="password"],
    .team-page select,
    .page-licence input[type="text"] {
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
        font-size: 16px;
    }

    .team-page .btn,
    .team-page button,
    .team-page summary.btn,
    .page-licence .btn {
        min-height: 44px;
    }

    .team-page .invite-actions .btn,
    .team-page .wizard-actions .btn,
    .team-page .add-field-submit,
    .page-licence .licence-form .btn {
        width: 100%;
    }

    .team-page .page-header > div {
        width: 100%;
    }

    .team-page .page-header .btn {
        flex: 1 1 100%;
        text-align: center;
        justify-content: center;
    }

    .settings-tabs {
        display: flex;
        overflow-x: auto;
        gap: 4px;
    }

    .settings-tab {
        flex: 0 0 auto;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .list-settings-row,
    .field-row,
    .member-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .list-settings-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .list-settings-actions .inline-form {
        display: flex;
        gap: 8px;
        flex: 1 1 100%;
    }

    .list-settings-actions input,
    .list-settings-actions select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .wizard-extra-row,
    .wizard-col-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .workbook-grid {
        grid-template-columns: 1fr;
    }

    /* Wide tables become stacked cards. */
    .team-page .data-table,
    .team-page .data-table tbody,
    .team-page .data-table tr,
    .team-page .data-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .team-page .data-table thead {
        display: none;
    }

    .team-page .data-table tr {
        margin-bottom: 10px;
        padding: 8px 12px;
        border: 1px solid #e2e5eb;
        border-radius: 10px;
    }

    .team-page .data-table td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: #67707d;
    }

    .page-licence .licence-history thead {
        display: none;
    }

    .page-licence .licence-history,
    .page-licence .licence-history tbody,
    .page-licence .licence-history tr,
    .page-licence .licence-history td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .page-licence .licence-history td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: #67707d;
    }

    .page-licence .licence-history tr {
        margin-bottom: 10px;
        padding: 8px 12px;
        border: 1px solid #e2e5eb;
        border-radius: 10px;
    }
}

/* Settings lists (Words page and friends): no bullets, even spacing. */
.list-settings { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

/* A card heading with a hint: the hint goes on its own line under the heading. */
.card-header { flex-wrap: wrap; }
.card-header > .card-sub { flex-basis: 100%; margin: 4px 0 0; color: var(--muted); }