/* Account V2 page layer. Keep only page-specific search, modal, settings and list fit. */

.account-page--v2 {
    --page-dock-gap: var(--space-4);
    --search-sticky-top: 82px;
    --search-sticky-top-collapsed: 12px;
    --search-action-size: 34px;
    --search-input-font-size: 17px;
    --search-action-icon-size: 18px;
    --search-symbol-font-size: 16px;
    --search-language-font-size: var(--font-size-sm);
    --search-language-min-width: clamp(114px, 19vw, 136px);
    --search-language-max-width: clamp(114px, 19vw, 136px);
    --sidebar-sticky-top: var(--search-sticky-top-current);
    width: 100%;
}

.account-page--v2 .page-dock__main [id^="account-"] {
    scroll-margin-top: calc(var(--header-height) + 22px);
}

.account-page--v2 .page-dock__main .app-button.app-button--danger,
.account-page--v2 .page-dock__main .account-content-preset.app-button {
    width: auto;
    min-width: 0;
    white-space: nowrap;
    --app-button-height: var(--button-height-sm);
    --app-button-padding-x: 12px;
    font-size: var(--font-size-sm);
    line-height: var(--type-label-line);
}

.account-page :is(.list-shell--compact-grid, .list-shell--columns-2) {
    --list-shell-gap: var(--space-3);
    --list-shell-padding: 0;
    --list-shell-radius: var(--radius-none);
    --list-shell-bg: transparent;
    max-width: 100%;
    opacity: 1;
}

.account-page--v2 .page-dock__main :is(.account-list-item, .account-list-entry) {
    --item-card-gap: 0;
    --item-card-padding: 14px 16px;
    --item-card-radius: var(--surface-radius);
    --item-card-bg: var(--theme-surface-base);
    --item-card-border: 1px solid var(--theme-border-normal);
    --item-card-hover-bg: color-mix(in srgb, var(--theme-surface-subtle) 70%, var(--theme-surface-base));
    --item-card-hover-border: 1px solid color-mix(in srgb, var(--theme-border-focus) 68%, var(--theme-border-normal));
    --result-card-main-gap: 0;
    --result-card-body-gap: 8px;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    box-shadow: var(--shadow-none, none);
}

.account-page--v2 .page-dock__main :is(.account-list-item, .account-list-entry):hover,
.account-page--v2 .page-dock__main :is(.account-list-item, .account-list-entry):focus-visible {
    transform: none;
    filter: none;
    outline: none;
}

.account-page--v2 .account-staff .section-head__inner {
    align-items: center;
    justify-content: space-between;
    gap: var(--control-gap-wide);
}

.account-page--v2 .account-import-hint {
    color: var(--theme-text-accent);
}

.account-first-visit-modal .layout-stack {
    gap: var(--control-gap-base);
}

.account-first-visit-modal .layout-stack h2 {
    margin: 0;
    font-size: clamp(1.14rem, 2.2vw, 1.3rem);
    line-height: 1.2;
}

.account-first-visit-modal .layout-stack p {
    margin: 0;
    color: var(--theme-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.account-first-visit-modal .layout-stack .button-panel__actions {
    margin-top: 2px;
}

.account-page--v2 #account-favorites .layout-grid-auto > .layout-stack > h3 {
    margin: 0;
    font-size: var(--font-size-md);
}

.account-page--v2 :is(#account-settings, #account-game-settings) .text-hint,
.account-page--v2 #game-history [data-history-meta].text-meta {
    font-size: var(--font-size-xs);
    color: var(--theme-text-muted);
}

.account-page--v2 :is(#account-settings, #account-game-settings, #account-local) .field-stack :is(input, select):focus-visible {
    border-color: var(--theme-action-secondary-border-hover);
}

#favorites-empty-nn,
#favorites-empty-ru,
#learned-empty,
#viewed-empty,
#notes-empty {
    margin-top: var(--control-gap-wide);
}

.account-page--v2 .account-list-entry {
    align-items: center;
    gap: var(--control-gap-tight);
}

.account-page--v2 .list-shell--columns-2 > li {
    display: flex;
    min-width: 0;
}

.account-page--v2 .list-shell--columns-2 > li > .account-list-entry {
    flex: 1 1 auto;
    height: 100%;
}

.account-page--v2 .account-list-entry > .account-list-item.result-card__main {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.account-page--v2 .account-list-entry .result-card__meta {
    min-width: 0;
    max-width: 100%;
}

.account-page--v2 .account-list-entry .result-card__meta-badge {
    min-width: 0;
    max-width: min(100%, 30ch);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-page--v2 .account-list-entry > .account-list-entry__controls {
    margin-inline-start: auto;
    align-self: center;
    flex-wrap: nowrap;
}

.account-page--v2 #favorites-lists {
    --layout-stack-gap: var(--space-3);
}

.account-page--v2 .account-word-actions[data-word-actions] {
    margin: var(--control-gap-tight) 0 0;
    padding: var(--control-padding-2xs);
    border-color: var(--surface-border-subtle);
    background: transparent;
    justify-content: flex-start;
}

.account-page--v2 .account-word-actions--compact[data-word-actions] {
    display: block;
    margin-top: var(--space-1);
}

.account-page--v2 .account-word-actions [data-word-actions-primary] {
    gap: var(--control-gap-tight);
    flex-wrap: wrap;
}

.account-page--v2 .account-word-actions [data-word-action] {
    min-height: var(--button-height-sm);
    padding: 0 var(--control-padding-x-compact);
    font-size: var(--font-size-xs);
}

.account-page--v2 .account-word-actions [data-word-action] .action-icon {
    --action-icon-size: var(--type-control-size);
}

.account-page--v2 .account-word-actions .account-word-action--manage {
    border-color: var(--surface-border-subtle);
}

.account-settings-groups {
    --layout-stack-gap: var(--control-gap-wide);
}

.account-settings-group {
    --item-card-bg: color-mix(in srgb, var(--theme-surface-base) 92%, var(--theme-surface-subtle));
    --item-card-border: 0;
    --item-card-hover-border: 0;
    --item-card-shadow: none;
    --item-card-padding: clamp(14px, 1.4vw, 18px);
    display: grid;
    gap: var(--control-gap-wide);
    margin: 0;
}

.account-settings-group h4 {
    margin: 0;
    font-size: var(--type-control-meta-size);
    letter-spacing: var(--type-label-track);
    text-transform: var(--hierarchy-status-transform);
    color: var(--theme-text-muted);
}

.account-settings-group__header {
    display: flex;
    align-items: center;
    gap: var(--control-gap-base);
}

.account-settings-group__header .info-trigger {
    margin-left: auto;
}

.account-settings-group__header .button-rail {
    margin-left: auto;
}

.account-content-prefs-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--control-gap-base);
    margin: 0;
}

.account-content-prefs-presets .account-content-preset {
    min-height: var(--button-height-sm);
}

.account-settings-subgroups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--control-gap-wide);
}

.account-settings-subgroup {
    min-width: 0;
}

.account-settings-subgroup__title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--type-control-weight);
    color: var(--theme-text-strong);
}

/* Helper cards in local/settings/history stay tonal even with neutral section shells. */
.account-page--v2 :is(#account-game-history, #account-game-settings, #account-local) .item-card {
    --item-card-bg: color-mix(in srgb, var(--theme-surface-base) 92%, var(--theme-surface-subtle));
    --item-card-border: 0;
    --item-card-hover-border: 0;
    --item-card-shadow: none;
}

.account-page--v2 :is(#account-game-settings, #account-local) .layout-grid-auto {
    --layout-grid-gap: var(--control-gap-wide);
    --layout-grid-min: var(--layout-grid-min-md);
}

.account-page--v2 :is(#account-settings, #account-game-settings, #account-local) .field-stack {
    display: grid;
    gap: var(--control-gap-tight);
    font-size: var(--font-size-sm);
    color: var(--theme-text-muted);
    --field-control-height: var(--sidebar-control-height);
    --field-control-radius: var(--sidebar-button-radius);
    --field-control-border: var(--border-width-base) solid var(--theme-action-secondary-border);
    --field-control-bg: var(--field-bg-color);
    --field-control-color: var(--theme-text-strong);
    --field-control-padding-x: var(--space-4);
}

#account-settings-content .field-stack {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 240px);
    align-items: center;
    gap: var(--control-gap-base);
    margin: 0;
}

#account-settings-content .field-stack > span {
    color: var(--theme-text-muted);
    font-size: var(--font-size-sm);
}

#account-settings-content .field-stack select {
    width: 100%;
}

#account-local .item-card--stack:last-child > .field-stack {
    margin-top: var(--control-gap-base);
    padding-top: var(--control-gap-base);
    border-top: 1px dashed var(--border-color);
    display: grid;
    gap: var(--control-gap-2xs);
    justify-items: start;
}

.account-page--v2 #game-history {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--control-gap-tight);
    max-height: none;
    overflow: visible;
}

.account-page--v2 #game-history [data-history-meta].layout-split {
    display: flex;
    justify-content: space-between;
    gap: var(--control-gap-tight);
    margin-top: var(--control-gap-tight);
}

@media (max-width: 900px) {
    .account-page--v2 {
        --search-sticky-top: max(8px, env(safe-area-inset-top));
        --search-sticky-top-collapsed: 4px;
    }

    .account-page--v2 .account-staff .section-head__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .account-page--v2 .page-dock__main .app-button.app-button--danger,
    .account-page--v2 .page-dock__main .account-content-preset.app-button {
        --app-button-height: 32px;
        font-size: var(--font-size-xs);
        --app-button-padding-x: 10px;
    }

    .account-page--v2 :is(#account-game-settings, #account-local) .layout-grid-auto,
    .account-settings-subgroups {
        grid-template-columns: 1fr;
    }

    #account-settings-content .field-stack {
        grid-template-columns: 1fr;
        gap: var(--control-gap-base);
    }
}

@media (max-width: 640px) {
    .account-page--v2 {
        --search-action-size: 30px;
        --search-input-font-size: 16px;
        --search-action-icon-size: 16px;
        --search-language-min-width: clamp(96px, 30vw, 112px);
        --search-language-max-width: clamp(96px, 30vw, 112px);
    }
}

@media (min-width: 1160px) {
    .account-page :is(.list-shell--compact-grid, .list-shell--columns-2) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: var(--control-gap-wide);
    }
}