/* ═══════════════════════════════════════════════════════════════
   auth.css —— 帳號相關頁面（登入、註冊、驗證信、忘記密碼、登出…）

   這些頁面是協會官網的延伸：淺底、細線分隔、深青碧點綴、等寬數字。
   色票、按鈕（.pt-btn）、小標（.pt-eyebrow）、導覽列（.pt-nav）都沿用
   官網的 portal.css，所以這支檔案要在 portal.css 之後載入。

   刻意不用：漸層、陰影堆疊、浮動／旋轉動畫、emoji。
   字級比官網內文略大一階，輸入框 48px 高 —— 年長的團員也要好點好讀。

   前綴 au- = auth
═══════════════════════════════════════════════════════════════ */

:root {
    --au-red:     #A8322A;
    --au-red-bg:  #FBEAE8;
    --au-req:     #C0392B;
}

/* ══════════════════════════════════════════════════════════════
   頁框：精簡導覽列 ＋ 內容 ＋ 精簡頁尾
══════════════════════════════════════════════════════════════ */
body.au-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.au-nav__back {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--pt-dark);
    padding: .45rem .2rem;
    border-bottom: 1.5px solid transparent;
    transition: border-color .2s, color .2s;
}
.au-nav__back:hover { color: var(--pt-primary); border-bottom-color: var(--pt-primary); }
.au-nav__back svg { transition: transform .2s; }
.au-nav__back:hover svg { transform: translateX(-3px); }

.au-main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 3.25rem 1.5rem 4rem;
}

.au-foot {
    border-top: 1px solid var(--pt-line);
    background: var(--pt-surface);
    font-size: .8rem;
    color: var(--pt-text-3);
}
.au-foot__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding-block: 1.25rem 1.4rem;
}
.au-foot__links { display: inline-flex; gap: 1.25rem; }
.au-foot__links a { color: var(--pt-text-2); }
.au-foot__links a:hover { color: var(--pt-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════
   外框
   登入、註冊：.au-split（左邊協會照片、右邊表單，見下方「照片版」）
   其餘頁面  ：.au-shell--narrow 單張窄卡
══════════════════════════════════════════════════════════════ */
.au-shell { width: 100%; }

.au-shell--narrow { max-width: 540px; }
.au-shell--narrow .au-card {
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow);
}

.au-card {
    background: var(--pt-surface);
    padding: 2.75rem 3.25rem 2.5rem;
    min-width: 0;
}

/* ── 頁首 ── */
.au-head { margin-bottom: 1.75rem; }
.au-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    color: var(--pt-ink);
    margin-top: .75rem;
}
.au-desc {
    font-size: .95rem;
    line-height: 1.85;
    color: var(--pt-text-2);
    margin-top: .5rem;
}
.au-desc strong { color: var(--pt-ink); font-weight: 600; }

/* 狀態圖示（驗證信已寄出、密碼已更新、連結失效…） */
.au-status {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--pt-soft);
    color: var(--pt-dark);
    margin-bottom: 1.25rem;
}
.au-status .pt-i { font-size: 1.6rem; stroke-width: 1.5; }
.au-status--ok   { background: var(--pt-green-bg); color: var(--pt-green); }
.au-status--warn { background: var(--au-red-bg);   color: var(--au-red); }

/* ══════════════════════════════════════════════════════════════
   提示訊息
══════════════════════════════════════════════════════════════ */
.au-alerts { display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.au-alert {
    padding: .8rem 1rem;
    border: 1px solid var(--pt-line-2);
    border-left: 3px solid var(--pt-dark);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-soft);
    color: var(--pt-deep);
    font-size: .92rem;
    line-height: 1.75;
}
.au-alert p + p { margin-top: .25rem; }
.au-alert--error   { background: var(--au-red-bg);    border-color: #EBC6C1; border-left-color: var(--au-red);   color: #7A241E; }
.au-alert--success { background: var(--pt-green-bg); border-color: #C3DED1; border-left-color: var(--pt-green); color: #174F3B; }
.au-alert--warning { background: var(--pt-amber-bg); border-color: #EBD7A8; border-left-color: var(--pt-amber); color: #6E4A00; }

/* ══════════════════════════════════════════════════════════════
   表單
══════════════════════════════════════════════════════════════ */
.au-form { display: grid; gap: 1.2rem; }

.au-legend { font-size: .82rem; color: var(--pt-text-3); margin-top: -.35rem; }

.au-field { display: grid; gap: .45rem; align-content: start; }
.au-label {
    font-size: .92rem;
    font-weight: 600;
    color: var(--pt-ink);
}
.au-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.au-label-row a {
    font-size: .86rem;
    font-weight: 600;
    color: var(--pt-dark);
}
.au-label-row a:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-opt  { font-weight: 400; font-size: .82rem; color: var(--pt-text-3); margin-left: .35rem; }
.au-req  { color: var(--au-req); font-weight: 700; margin-left: .15rem; }

.au-field input[type="text"],
.au-field input[type="email"],
.au-field input[type="password"] {
    width: 100%;
    min-height: 48px;
    font-family: inherit;
    font-size: 1rem;          /* 16px：iOS 不會自動放大畫面 */
    color: var(--pt-ink);
    background: #fff;
    border: 1px solid var(--pt-line-2);
    border-radius: var(--pt-radius-sm);
    padding: .7rem .85rem;
    transition: border-color .15s, box-shadow .15s;
}
.au-field input::placeholder { color: var(--pt-text-3); }
.au-field input:focus {
    outline: none;
    border-color: var(--pt-primary);
    box-shadow: 0 0 0 3px rgba(0, 153, 176, .16);
}
.au-field.is-error input { border-color: var(--au-red); }
.au-field.is-error input:focus { box-shadow: 0 0 0 3px rgba(168, 50, 42, .14); }

.au-hint  { font-size: .82rem; line-height: 1.7; color: var(--pt-text-3); }
.au-error { font-size: .86rem; line-height: 1.65; color: var(--au-red); }

/* 密碼欄：右側「顯示／隱藏」文字按鈕（比只有眼睛圖示更好懂） */
.au-pass { position: relative; }
.au-pass input { padding-right: 4.6rem !important; }
.au-pass__toggle {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    padding: .42rem .7rem;
    border: 0;
    border-radius: 4px;
    background: none;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    color: var(--pt-dark);
    cursor: pointer;
}
.au-pass__toggle:hover { background: var(--pt-soft); }
.au-pass__toggle:focus-visible { outline: 2px solid var(--pt-primary); outline-offset: 1px; }

/* 密碼規則：沒有 JS 時是一般說明文字，有 JS 時逐條打勾 */
.au-rules { list-style: none; display: grid; gap: .2rem; font-size: .82rem; color: var(--pt-text-3); }
.au-rules li { display: flex; align-items: center; gap: .45rem; }
.au-rules li::before {
    content: '';
    width: 7px; height: 7px; flex: none;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--pt-line-2);
}
.au-rules li.is-ok { color: var(--pt-green); }
.au-rules li.is-ok::before { background: var(--pt-green); box-shadow: none; }
/* 密碼說明：上面是即時打勾的規則，下面是送出時才檢查的兩條（一般說明文字，不打勾） */
.au-pwhelp { display: grid; gap: .3rem; }
.au-pwhelp .au-hint { line-height: 1.65; }

/* 勾選框 */
.au-check {
    display: inline-flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--pt-text);
    cursor: pointer;
}
.au-check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: .22rem;
    accent-color: var(--pt-dark);
    cursor: pointer;
}
.au-check a { color: var(--pt-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.au-submit { width: 100%; padding: .95rem 1.25rem; font-size: 1rem; }
.au-submit:disabled { opacity: .72; cursor: progress; }

/* ── 分隔：或 ── */
.au-or {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.6rem 0;
    font-size: .84rem;
    color: var(--pt-text-3);
}
.au-or::before, .au-or::after { content: ''; flex: 1; height: 1px; background: var(--pt-line); }

/* ── Google ── */
.au-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    width: 100%;
    min-height: 48px;
    padding: .7rem 1rem;
    border: 1px solid var(--pt-line-2);
    border-radius: var(--pt-radius-sm);
    background: #fff;
    font-size: .95rem;
    font-weight: 600;
    color: var(--pt-ink);
    transition: border-color .2s, background .2s;
}
.au-google:hover { border-color: var(--pt-dark); background: var(--pt-bg); }
.au-google svg { width: 18px; height: 18px; flex: none; }
.au-google__note { margin-top: .6rem; font-size: .8rem; line-height: 1.7; color: var(--pt-text-3); text-align: center; }
.au-google__note a { color: var(--pt-text-2); text-decoration: underline; text-underline-offset: 3px; }

/* ── 卡片底部的連結 ── */
.au-links {
    display: grid;
    gap: .5rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pt-line);
    font-size: .92rem;
    color: var(--pt-text-2);
}
.au-links a { color: var(--pt-dark); font-weight: 600; }
.au-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 單張卡上的按鈕群 */
.au-actions { display: grid; gap: .65rem; margin-top: 1.75rem; }
.au-actions .pt-btn { width: 100%; padding-block: .9rem; font-size: .95rem; }

/* 驗證信步驟 */
.au-steps {
    list-style: none;
    counter-reset: au-step;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--pt-line);
    margin-top: 1.5rem;
}
.au-steps li {
    counter-increment: au-step;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: .85rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--pt-line);
    font-size: .94rem;
    line-height: 1.75;
    color: var(--pt-text);
}
.au-steps li::before {
    content: counter(au-step);
    width: 26px; height: 26px;
    border: 1px solid var(--pt-line-2);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Outfit', 'Noto Sans TC', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    color: var(--pt-dark);
    background: #fff;
    margin-top: .1rem;
}
.au-steps strong { color: var(--pt-ink); font-weight: 600; }

/* 信箱地址 */
.au-email {
    display: block;
    margin-top: 1.25rem;
    padding: .8rem 1rem;
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-bg);
    font-size: 1rem;
    font-weight: 600;
    color: var(--pt-ink);
    word-break: break-all;
}

/* 原因清單（連結失效時） */
.au-reasons {
    margin-top: 1rem;
    padding: .9rem 1.1rem .9rem 2.2rem;
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-bg);
    font-size: .9rem;
    line-height: 1.85;
    color: var(--pt-text-2);
}

/* 倒數提示（重寄驗證信） */
.au-cooldown { font-size: .86rem; color: var(--pt-text-2); text-align: center; }

/* ══════════════════════════════════════════════════════════════
   照片版：登入、註冊
   左邊是協會相簿裡排第一張的公開照片（行政人員在官網編輯模式拖曳就能換），
   右邊表單直接放在白底上，不是浮在頁面中間的卡片。
   相簿沒有照片時，左邊改成「童軍教育四大支柱」。
   880px 以下：表單在上，照片移到表單下方，依原比例完整顯示（見「響應式」）。
══════════════════════════════════════════════════════════════ */
.au-main--bleed { display: block; padding: 0; }
/* 滿版頁面的導覽列也拉滿，會徽才會和左邊照片對齊 */
.au-body--bleed .pt-nav__inner { max-width: none; padding-inline: 2rem; }

.au-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: calc(100vh - 69px);          /* 導覽列 68px ＋ 底線 */
    background: var(--pt-surface);
}

/* ── 左：照片 ── */
.au-visual {
    position: relative;
    background: var(--pt-deep);
    container: auvisual / inline-size;        /* 說明條依照片欄的寬度決定排一行或兩行 */
}
/* 註冊頁比畫面長：照片停在畫面上，只捲動右邊的表單 */
.au-visual__frame {
    position: sticky;
    top: 69px;
    height: calc(100vh - 69px);
    overflow: hidden;
}

.au-photo { position: absolute; inset: 0; margin: 0; }
.au-photo img { width: 100%; height: 100%; object-fit: cover; }

/* 照片說明：貼在照片最下緣的細條。日期、標題、說明；
   照片欄夠寬時排成一行，窄一點時分兩行（日期＋標題／說明），超出的字以 … 收尾 */
.au-photo__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .6rem 1.5rem .7rem;
    background: rgba(0, 56, 64, .82);
    color: #fff;
    line-height: 1.55;
}
.au-photo__head {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    min-width: 0;
}
.au-photo__date {
    flex: none;
    font-family: 'Outfit', 'Noto Sans TC', sans-serif;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .7);
}
.au-photo__title,
.au-photo__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.au-photo__title { font-size: .92rem; font-weight: 600; }
.au-photo__text  { font-size: .84rem; color: rgba(255, 255, 255, .78); }

@media (min-width: 881px) {
    @container auvisual (min-width: 640px) {
        .au-photo__cap { flex-direction: row; align-items: baseline; gap: 1rem; }
        .au-photo__head { flex: 0 1 auto; max-width: 62%; }
        .au-photo__text {
            flex: 1 1 0;
            padding-left: 1rem;
            border-left: 1px solid rgba(255, 255, 255, .3);
        }
    }
}

/* 相簿沒有照片時：童軍教育四大支柱 */
.au-pillars {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem clamp(2rem, 6vw, 5.5rem);
    background: var(--pt-deep);
    color: #fff;
}
.au-pillars::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, .045) 0 1px,
        transparent 1px 11px
    );
    pointer-events: none;
}
.au-pillars > * { position: relative; }
.au-pillars__label {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .24em;
    color: rgba(255, 255, 255, .6);
}
.au-pillars__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 440px;
    margin-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
    border-left: 1px solid rgba(255, 255, 255, .2);
}
.au-pillars__grid span {
    padding: 1.5rem 1.25rem 1.4rem;
    border-right: 1px solid rgba(255, 255, 255, .2);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    font-weight: 700;
    letter-spacing: .32em;
    line-height: 1.2;
}
.au-pillars__motto {
    margin-top: 1.75rem;
    font-size: 1.02rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .78);
}

/* ── 右：表單 ── */
.au-side {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem clamp(2rem, 5vw, 5rem) 4.5rem;
    min-width: 0;
}
.au-split--long .au-side { align-items: flex-start; }
.au-side__inner { width: 100%; max-width: 420px; }
.au-side .au-title { font-size: 1.9rem; margin-top: 0; }

/* ══════════════════════════════════════════════════════════════
   服務條款／隱私政策（官網頁面，套 portal_base）
══════════════════════════════════════════════════════════════ */
.au-legal { padding: 3.5rem 0 4.5rem; }
.au-legal__inner { max-width: 760px; }
.au-legal__meta { font-size: .84rem; color: var(--pt-text-3); margin-top: .6rem; }
.au-legal__draft {
    margin-top: 1.5rem;
    padding: .9rem 1.1rem;
    border: 1px solid #EBD7A8;
    border-left: 3px solid var(--pt-amber);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-amber-bg);
    color: #6E4A00;
    font-size: .9rem;
    line-height: 1.75;
}
.au-legal__body {
    margin-top: 2.25rem;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    padding: 2.25rem 2.5rem;
    font-size: .98rem;
    line-height: 1.95;
    color: var(--pt-text);
}
.au-legal__body h2 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--pt-ink);
    margin: 2rem 0 .5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pt-line);
}
.au-legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.au-legal__body p + p { margin-top: .6rem; }
.au-legal__body ol, .au-legal__body ul { padding-left: 1.4rem; margin-top: .4rem; }
.au-legal__body li + li { margin-top: .2rem; }

/* ══════════════════════════════════════════════════════════════
   響應式
══════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
    .au-split { grid-template-columns: 1fr; min-height: 0; }

    /* 先表單，照片放到表單下方。照片依原比例完整顯示、不裁切，
       說明放在照片正下方，不蓋在照片上 */
    .au-side   { order: 1; padding: 2.25rem 1.5rem 3rem; }
    .au-visual { order: 2; background: var(--pt-surface); border-top: 1px solid var(--pt-line); }
    .au-visual__frame { position: static; height: auto; overflow: visible; }
    .au-photo { position: static; }
    .au-photo img { height: auto; object-fit: initial; }
    .au-photo__cap {
        position: static;
        gap: .2rem;
        padding: .9rem 1.5rem 1.4rem;
        background: none;
        color: var(--pt-text);
    }
    .au-photo__date { color: var(--pt-text-3); }
    .au-photo__title { color: var(--pt-ink); font-size: .95rem; }
    .au-photo__title,
    .au-photo__text { white-space: normal; overflow: visible; }
    .au-photo__text { color: var(--pt-text-2); font-size: .88rem; line-height: 1.75; }

    /* 沒有照片時的四大支柱：一樣放在表單下方 */
    .au-pillars { position: relative; inset: auto; padding: 2rem 1.5rem 2.25rem; }
    .au-pillars__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; margin-top: .9rem; }
    .au-pillars__grid span { padding: .85rem .5rem; font-size: 1.2rem; letter-spacing: .15em; text-align: center; }
    .au-pillars__motto { margin-top: 1rem; font-size: .92rem; }
}

@media (max-width: 600px) {
    .au-main { padding: 1.25rem .75rem 2.5rem; }
    .au-main--bleed { padding: 0; }
    .au-card { padding: 1.85rem 1.35rem 1.75rem; }
    .au-title,
    .au-side .au-title { font-size: 1.5rem; }
    .au-nav__long { display: none; }         /* 窄螢幕只寫「回首頁」 */
    .au-body--bleed .pt-nav__inner { padding-inline: 1.1rem; }
    .au-side { padding: 1.75rem 1.1rem 2.5rem; }
    .au-photo__cap { padding-inline: 1.1rem; }
    .au-pillars { padding-inline: 1.1rem; }
    .au-pillars__grid span { font-size: 1.05rem; letter-spacing: .08em; }
    .au-legal { padding: 2rem 0 3rem; }
    .au-legal__body { padding: 1.5rem 1.25rem; }
}