/* 学園祭ゲストページ（スマホのゲスト）
   土台はマイページ（../mypage/mypage.css）。ここはログインまわりと端末の一覧だけ。
   CSS は `&` の入れ子で書く（ルート CLAUDE.md の規約） */

header {
    & .card-no {
        margin-top: .15rem;
        font-variant-numeric: tabular-nums;
    }
}

.intro {
    & p {
        margin: 0;
    }
}

button.wide {
    width: 100%;
}

/* ---- ログイン前 ---- */

.auth-tabs {
    display: flex;
    margin: 0 0 .75rem;

    & button {
        flex: 1;
        margin: 0;
        padding: .75em .4em;
        border: none;
        border-bottom: 3px solid var(--line);
        border-radius: 0;
        background-color: transparent;
        color: var(--muted);
        font-size: 1rem;

        &.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
            font-weight: bold;
        }

        /* 新規登録を止めているとき・学園祭の終了後の「はじめての方」（→ guest.js showAuth） */
        &:disabled {
            opacity: .4;
            cursor: not-allowed;
        }
    }
}

.auth-form {
    & label {
        display: block;
        margin-top: .9rem;
        font-size: .9rem;
        font-weight: bold;
    }

    /* iOS は 16px 未満の入力欄を触ると画面を拡大するので 1rem 以上にする */
    & input {
        display: block;
        width: 100%;
        margin-top: .3rem;
        font-size: 1.1rem;
        padding: .6em .7em;
        border: 1px solid var(--line);
        border-radius: .35rem;
        background-color: #fff;
    }

    & input[inputmode="numeric"] {
        letter-spacing: .5em;
        font-variant-numeric: tabular-nums;
    }

    & .memo {
        margin-top: 1rem;
    }
}

.wait-box {
    text-align: center;

    & .wait-timer {
        font-size: 1.4rem;
        font-variant-numeric: tabular-nums;
        color: var(--muted);
    }
}

/* ---- ログイン中 ---- */

.notice-box.info {
    background-color: #eef3fa;
    border-color: #c9d6ea;
    color: var(--ink);
}

.login-notice {
    & p {
        margin: 0;
    }
}

.row-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;

    & button {
        margin: 0;
    }
}

.device-list {
    list-style: none;
    margin: .25rem 0 .25rem;
    padding: 0;

    & li {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        padding: .5rem 0;
        border-bottom: 1px solid var(--line);
        font-size: .9rem;

        &:last-child {
            border-bottom: none;
        }
    }

    & .device-name {
        font-weight: bold;
    }

    & .device-meta {
        color: var(--muted);
        font-size: .8rem;
        text-align: right;
        white-space: nowrap;
    }

    & .this {
        color: var(--accent);
        font-size: .8rem;
        margin-left: .4em;
    }

    & .online {
        color: var(--ok);
    }
}

/* 履歴の「この端末／ほかの端末」（account-history.js が付ける） */
#historyTable {
    & .via {
        display: inline-block;
        margin-top: .2rem;
        padding: 0 .45em;
        border-radius: 1em;
        background-color: #eef1f5;
        color: var(--muted);
        font-size: .72rem;

        &.this {
            background-color: #e6eefb;
            color: var(--accent);
        }
    }
}

/* 登録の案内（使える文字・自分だけの名前・本名は避ける） */
.name-rules {
    margin-top: .4rem;
}

/* ほかの端末のログインの確認（.request-dialog）の見た目は ../css/dialog.css（全画面のダイアログと共通） */