/* =============================================================================
   SudaHub redesign — Account (CLAUDE.md §7.5)
   Phase 5e, last screen of Phase 5. A brand surface (§0) but a modest one —
   sign-in is deliberately not the loudest thing here (§7.5: "Sign-in
   currently gets the biggest gradient button in the app; it's the least
   important screen"). Settings render as chip rows reusing the Phase 4 Chip
   primitive rather than inventing a 14th "Switch" component.
   ========================================================================== */

.account-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 640px;
    margin-inline: auto;
}

/* ---------- Sign-in invitation ---------- */
.account-hero {
    padding: var(--space-8);
    /* The one brand touch allowed on this modest surface — a thin gradient
       rule, not a gradient button or background. */
    border-block-start: 3px solid transparent;
    border-image: var(--grad-brand) 1;
}
.account-hero-title { font-size: var(--fs-title); font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.account-hero-body { font-size: var(--fs-body-s); color: var(--text-secondary); line-height: 1.6; margin: 0 0 16px; max-width: 52ch; }
.account-toggle-mode-btn { width: 100%; margin-block-start: 12px; }

.account-banner { font-size: var(--fs-label); font-weight: 600; border-radius: var(--r-md); padding: 10px 12px; margin-block-end: 12px; }
.account-banner-error { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.account-banner-notice { background: color-mix(in srgb, var(--rate-up) 14%, transparent); color: var(--rate-up); }

.account-form { display: flex; flex-direction: column; gap: 8px; }
.account-field-label { font-family: var(--font-label); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); }
[lang="en"] .account-field-label { text-transform: uppercase; }
[lang="ar"] .account-field-label { letter-spacing: 0; }
.account-form .btn { margin-block-start: 4px; }

.account-inline-form { display: flex; gap: 8px; align-items: center; }
.account-inline-form .input { flex: 1; min-width: 0; }

/* ---------- Profile ---------- */
.account-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--space-8);
    /* Settings + Sign Out sit beside the name on one row, and on a 371px phone
       they claimed ~190px of it — squeezing the text column to about 57px, so
       the name truncated to four characters and "Member since August 1, 2026"
       broke into four stacked words. Wrapping lets the buttons drop to their
       own line as soon as the identity needs the room. */
    flex-wrap: wrap;
}
.account-avatar {
    width: 52px; height: 52px;
    border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center;
    color: rgb(var(--text-on-accent-rgb)); font-weight: 700; font-size: var(--fs-title-s);
    flex-shrink: 0;
}
/* A real floor, not just `flex: 1`: the basis is what forces the actions
   to wrap instead of the name being crushed to an ellipsis. */
.account-profile-info { flex: 1 1 150px; min-width: 0; }
.account-profile-name { font-weight: 700; font-size: var(--fs-body); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.account-profile-email { font-size: var(--fs-label); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0 0; }
.account-profile-since { font-family: var(--font-label); font-size: var(--fs-meta); color: var(--text-muted); margin: 3px 0 0; }
.account-signout-btn { flex-shrink: 0; }
.account-profile-actions { flex-shrink: 0; }

/* ---------- Sections ---------- */
.account-section { padding: var(--space-8); display: flex; flex-direction: column; gap: 18px; }
.account-section-title { font-family: var(--font-label); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); margin: 0; }
[lang="en"] .account-section-title { text-transform: uppercase; }
[lang="ar"] .account-section-title { letter-spacing: 0; }
.account-section .account-form:not(:last-child) { padding-block-end: 14px; border-block-end: 1px solid var(--line-subtle); }

.account-setting-group { display: flex; flex-direction: column; gap: 8px; }
.account-setting-label { font-size: var(--fs-body-s); font-weight: 600; color: var(--text-primary); margin: 0; }
.account-setting-hint { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.5; margin: -4px 0 0; max-width: 56ch; }
.account-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Activity feed ---------- */
.account-activity-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 10px;
    cursor: pointer;
}
.account-activity-row:not(:last-child) { border-block-end: 1px solid var(--line-subtle); }
.account-activity-info { flex: 1; min-width: 0; }
.account-activity-title { font-size: var(--fs-label); font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.account-activity-track { margin-block-start: 6px; height: 4px; width: 100%; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; }
.account-activity-fill { height: 100%; background: var(--accent); }
.account-activity-meta { font-family: var(--font-label); font-size: var(--fs-micro); color: var(--text-muted); flex-shrink: 0; }

/* ================= YOU: STAT TILES + VERSION (RESKIN §2.4) ================= */
.you-stats {
    display: flex;
    gap: var(--space-3);
    margin-block: var(--space-6);
}
.you-stat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-neutral-900);
    background: var(--color-surface);
}
.you-stat-n {
    font-family: var(--font-ui);
    font-weight: var(--fw-medium);
    font-size: var(--fs-title);
    color: var(--color-accent-200);
}
.you-stat-label {
    font-family: var(--font-label);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-label);
    color: var(--color-neutral-500);
    line-height: var(--lh-snug);
}
[lang="en"] .you-stat-label { text-transform: uppercase; }

.you-version {
    margin-block-start: var(--space-8);
    padding-inline: var(--space-1);
    font-size: var(--fs-meta);
    line-height: var(--lh-body);
    color: var(--color-neutral-500);
}

.you-streak {
    margin-block-start: var(--space-4);
    font-size: var(--fs-label);
    color: var(--color-neutral-400);
}

/* ================= SETTINGS PAGE ================= */
.settings-page { display: flex; flex-direction: column; gap: var(--space-6); }
.settings-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding-inline: var(--space-3);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-neutral-300);
    font-family: var(--font-ui);
    font-size: var(--fs-body-s);
    cursor: pointer;
}
.settings-back:hover { background: var(--color-surface); color: var(--color-accent-200); }
.settings-back svg { width: 18px; height: 18px; }
/* Direction-carrying — mirrors under RTL. */
[dir="rtl"] .settings-back svg { transform: scaleX(-1); }

.settings-tabs { align-self: center; }
.settings-note {
    padding: var(--space-6);
    text-align: center;
    font-size: var(--fs-body-s);
    color: var(--color-neutral-500);
}
.account-profile-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.account-settings-entry { display: flex; justify-content: center; margin-block-start: var(--space-4); }

/* ---------- Install offer (PWA / Android WebAPK) ----------
   Only present when the browser has said the app qualifies, so it never
   occupies space as a dead control. */
.account-install-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    margin-block-start: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-neutral-900);
    background: var(--color-surface);
}
.account-install-text {
    flex: 1;
    /* flex's min-width:auto would refuse to wrap the body copy and push the
       button off the card. */
    min-width: 0;
}
.account-install-title {
    font-family: var(--font-ui);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body);
    color: var(--color-neutral-100);
}
.account-install-body {
    margin-block-start: var(--space-1);
    font-size: var(--fs-body-s);
    line-height: var(--lh-body);
    color: var(--color-neutral-400);
    text-wrap: pretty;
}
/* .btn-sm computes to 34px, under §9's 44px hit-area floor. Raising it here
   rather than on the shared class, which every other caller in the app also
   uses and would relayout — this is the card's primary action and the one
   that has to be comfortable to hit. */
.account-install-card .btn { flex-shrink: 0; min-height: 44px; }