/* The starter's own screens (spec §4.1). The frame, the top and bottom bars,
   the panel outlet and the motion are shell.css (Kassza's, verbatim but for
   the D13 tokens); the components are ds.css. This file holds only what the
   starter's pages and its two shell additions (EtNav, the auth stack) need,
   so it stays small. Loaded after shell.css and before ds.css: at equal
   specificity a rule here beats the shell and loses to the DS. */

/* ──────────── Auth shell (AuthLayout + Pages/Authentication) ────────────
   Kassza kept these in <style> blocks inside the two .razor files; the
   starter keeps every rule in a stylesheet. */
.auth-shell { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background-color: var(--et-color-bg); box-sizing: border-box; }
/* One column of cards: the page's card, then whatever Authentication puts in
   AuthLayout's section below it (the DevAuth user list). */
.auth-stack { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.auth-card  { width: auto; }
/* Desktop: 400px read small in a wide window. !important because
   EtSurface's Pad is an inline style. The card is portrait, capped at the
   viewport minus the shell's padding so a short laptop screen doesn't
   scroll; the content centres in the extra height. */
@media (min-width: 960px) {
    .auth-stack { max-width: 480px; }
    .auth-card {
        padding: 40px !important;
        min-height: min(458px, calc(100dvh - 130px));
        display: flex; flex-direction: column; justify-content: center;
    }
    /* With the DevAuth card below, the login card gives back the height. */
    .auth-stack:has(> :nth-child(2)) .auth-card { min-height: 0; }
}

.auth-signed-out { display: flex; flex-direction: column; align-items: center; padding: 24px; text-align: center; }
.auth-signed-out-icon { font-size: 56px; margin-bottom: 12px; }
.auth-title { font-size: 1.5rem; font-weight: 600; margin: 0 0 4px; }
.auth-subtitle { font-size: 1rem; font-weight: 600; color: var(--et-color-accent); margin: 0 0 12px; }
.auth-message { font-size: 0.875rem; opacity: 0.78; max-width: 320px; margin: 0 0 24px; }

/* The login card. Left-aligned, unlike the signed-out / error cards, and with
   no padding of its own: AuthLayout's surface pads it (32px). */
.auth-login { display: flex; flex-direction: column; text-align: left; }
.auth-login-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.auth-login-icon { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; }
/* The brand tile reused as the login icon. Doubled class: ds.css loads after
   app.css, and its .et-topbar-logo (32px) would otherwise win the tie. */
.auth-login-icon.et-topbar-logo { width: 52px; height: 52px; font-size: 20px; border-radius: 14px; }
.auth-login-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--et-color-accent); margin-bottom: 2px; }
.auth-login .auth-title { margin: 0; line-height: 1.2; }
.auth-login-lead { font-size: 0.875rem; color: var(--et-color-ink-2); margin: 4px 0 0; }
.auth-login-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.auth-login .et-field-label { display: block; cursor: text; }
/* The raw field-card markup has no focus state of its own (EtFieldRow sets
   --focus from a parameter); :focus-within gives the real input the same
   ring, and an error outranks it. */
.auth-login .et-field-card:focus-within:not(.et-field-card--error) {
    border: 1.5px solid var(--et-color-accent);
    box-shadow: 0 0 0 3px rgba(var(--et-cta-shadow-rgb), 0.15);
}
/* 24px on a phone instead of the surface's 32px (Pad is an inline style). */
@media (max-width: 479.98px) {
    .auth-card:has(.auth-login) { padding: 24px !important; }
}
@media (min-width: 960px) {
    .auth-title { font-size: 1.75rem; }
    .auth-login-icon { width: 60px; height: 60px; border-radius: 16px; }
    .auth-login-icon.et-topbar-logo { width: 60px; height: 60px; font-size: 23px; border-radius: 16px; }
}

/* The "vagy" hairline between the one-time code and the providers, and the provider
   buttons' marks (Components/Common/{GoogleLogo,AppleLogo}.razor) — Kassza app.css. */
.et-or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--et-color-ink-3);
}
.et-or-divider::before,
.et-or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--et-color-border);
}
/* Doubled class: ds.css loads after app.css, so a lone .et-google-btn loses to .et-btn. */
.et-btn.et-google-btn { gap: 10px; }
.et-google-logo,
.et-apple-logo { flex-shrink: 0; }
/* ProviderButtons' column: Google and Apple one under the other, the card's 8px rhythm. */
.auth-login-providers { display: flex; flex-direction: column; gap: 8px; }

/* ──────────── EtNav (Components/Nav) — the ≥960px header navigation ────────────
   The segmented look of the mockup (D1–D4): a surface-2 track, the active
   destination raised on the surface. Links, so the active state is the
   NavLink's class, not a sliding thumb. Below 960px the bottom bar's tabs
   are the navigation and this goes. */
.et-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: var(--et-color-surface-2);
    font-family: var(--et-font-family-base);
}
.et-nav-item {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--et-color-ink-2);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--et-motion-fast), color var(--et-motion-fast);
}
.et-nav-item:hover { color: var(--et-color-ink); }
.et-nav-item--active {
    background: var(--et-color-surface);
    color: var(--et-color-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.et-nav-item:focus-visible {
    outline: 2px solid var(--et-color-accent);
    outline-offset: 2px;
}
@media (max-width: 959.98px) {
    .app-topbar .app-topbar-nav { display: none; }
}

/* ──────────── Accessible focus ring (Kassza app.css, Task 4) ────────────
   Replaces browser/UA defaults with an accent-colored 3px ring that reads on
   every palette. Uses :focus-visible so the ring only appears on keyboard
   focus (not on every click). Kassza kept it in app.css, not shell.css,
   although it is generic: its border-radius has to win, at equal specificity,
   over the corners earlier rules give focusable controls — and app.css loads
   after shell.css. Same here. */
:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--et-color-accent) 75%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* EtFocusOnNavigate focuses the page's h1 (tabindex="-1") on every page load
   so screen readers land on it. On a fresh load with no click yet — a provider
   sign-in coming back, a reload — the browser counts that as :focus-visible and
   draws the ring above around the heading, which reads as "selected". The
   heading is never a keyboard target, so it never needs the ring. */
h1[tabindex="-1"]:focus {
    outline: none;
}

/* ════════════ The starter's screens (spec §4.2) ════════════ */

/* Section rhythm: every block of a page sits 20px above the next (Kassza's
   home spends the same 20 between its sections). */
.et-page-sec { margin-bottom: 20px; }

/* Two columns on a desktop, one on a phone — Kassza's home grid (app.css
   "DS home layout"): Home, Emberek and Kérések keep their list in the main
   column and what waits for the user in the side one. */
.et-home-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    column-gap: 22px;
    align-items: start;
}
.et-home-main { grid-column: 1; min-width: 0; }
.et-home-side { grid-column: 2; min-width: 0; }
@media (max-width: 767.98px) {
    .et-home-grid { grid-template-columns: 1fr; column-gap: 0; }
    .et-home-main, .et-home-side { grid-column: 1; }
}

/* A hero with an action at its end (Értesítések' "Mind olvasott"). */
.et-page-hero.et-page-hero--with-action {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

/* Stacked cards with the shelf's 10px between them. */
.et-card-stack { display: flex; flex-direction: column; gap: 10px; }

/* A form's fields, 10px apart (the gallery's FieldRow specimen), and the small
   label above a control that is not a field card (the expiry, the recipient
   list, the mode switch). */
.et-form-stack { display: flex; flex-direction: column; gap: 10px; }
.et-form-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--et-color-ink);
    margin: 4px 2px 8px;
}
/* A list that failed validation: the field card's error ring, on a surface. */
.et-surface.et-surface--error { box-shadow: 0 0 0 1.5px var(--et-color-owe); }

/* A request's message: EtNotifRow's reason block (an italic quote on
   surface-2), scaled up to body size where it is the content. */
.et-quote {
    padding: 10px 14px;
    border-radius: var(--et-card-radius-sm);
    background: var(--et-color-surface-2);
    color: var(--et-color-ink-2);
    font-size: 14px;
    font-style: italic;
    line-height: 1.45;
    margin-bottom: 20px;
    overflow-wrap: anywhere;
}

/* ── The user panel's card ── */
.et-user-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0 20px;
    text-align: center;
}
.et-user-card-name { margin-top: 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--et-color-ink); }
.et-user-card-sub { font-size: 13px; color: var(--et-color-ink-2); }

/* ── The request detail panel ── */
.et-request-detail-status { display: flex; justify-content: center; margin-bottom: 14px; }
.et-request-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 20px; }

/* ── Értesítések ── */
.et-load-more { display: flex; justify-content: center; margin-top: 12px; }

/* ── Profil ── */
.et-profile { max-width: 680px; margin: 0 auto; }
.et-profile-identity { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.et-profile-name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--et-color-ink); }
.et-profile-email { font-size: 13px; color: var(--et-color-ink-2); margin-top: 2px; }
/* The tappable avatar (AvatarPicker, Kassza's rules) — opens the EtDropdown with "Új profilkép" /
   "Kép törlése", or the file picker straight away. A plain button (not a styled div) so it
   stays focusable and keyboard-operable; the disc itself is the EtAvatar child. */
.et-profile-avatar-trigger {
    position: relative;
    border: 0;
    background: none;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
}
.et-profile-avatar-trigger:disabled { opacity: 0.5; cursor: default; }
.et-profile-avatar-trigger:focus-visible {
    outline: 2px solid var(--et-color-accent);
    outline-offset: 2px;
}
/* Camera badge: the only hint that the disc is tappable. Over the trigger's own bottom-right
   corner rather than a separate control, so the click target stays the one button. --busy
   hides it: the spinner already says "in progress". */
.et-profile-avatar-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--et-color-surface);
    border: 1px solid var(--et-color-border);
    box-shadow: var(--et-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
}
.et-profile-avatar-trigger--busy .et-profile-avatar-badge { display: none; }
/* Upload in flight: the picked photo already shows (the client-side resized preview) and this
   ring spins over it — indeterminate, because WASM's HttpClient reports no upload progress.
   --busy overrides the :disabled dimming: the new picture should be visible while it uploads.
   The spin is a transform, so it stays on the compositor. */
.et-profile-avatar-trigger--busy { opacity: 1; }
.et-profile-avatar-spinner {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.10);
    border-top-color: var(--et-color-accent);
    animation: et-profile-avatar-spin .8s linear infinite;
    pointer-events: none;
}
@keyframes et-profile-avatar-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .et-profile-avatar-spinner { animation-duration: 2.4s; }
}
.et-profile-avatar-status {
    font-size: 13px;
    font-weight: 600;
    color: var(--et-color-accent);
    margin-top: 2px;
}
.et-profile-avatar-input { display: none; }

/* A request's attachments (RequestAttachments, S35; Kassza's .et-attach-strip): 64px tiles in
   a row that scrolls sideways on a phone — the presigned thumbnail for an image, a glyph and the
   name for a PDF — each with a small ✕ on its corner. The add row under it is EtFieldRow's
   Attach variant. */
.et-request-attachments { margin-bottom: 20px; }
.et-attach-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 6px 2px 0;
    margin-bottom: 10px;
}
.et-attach-strip-item { position: relative; flex-shrink: 0; }
.et-attach-strip-thumb,
.et-attach-strip-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    border: 1px solid var(--et-color-border);
    background: var(--et-color-surface-2);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    font-size: 20px;
}
.et-attach-strip-chip { padding: 4px; }
.et-attach-strip-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.et-attach-strip-chip-name {
    font-size: 9px;
    color: var(--et-color-ink-3);
    max-width: 56px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.et-attach-strip-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--et-color-border);
    background: var(--et-color-surface);
    color: var(--et-color-ink-3);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.et-attach-strip-remove:hover { color: var(--et-color-owe); }
/* The pick-time shrink and the upload: one line with an indeterminate ring — WASM's HttpClient
   reports no upload progress, so the count of files is the one honest number. */
.et-attach-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--et-color-ink-2);
    margin: 0 2px 8px;
}
.et-attach-status-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--et-color-border);
    border-top-color: var(--et-color-accent);
    animation: et-profile-avatar-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .et-attach-status-spinner { animation-duration: 2.4s; }
}
.et-attach-input { display: none; }
.et-profile-appearance { padding: 14px 15px; }
.et-profile-setting + .et-profile-setting { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--et-color-border); }
.et-profile-save { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.et-profile-footnote { font-size: 11px; color: var(--et-color-ink-3); margin: 4px 2px 24px; }
/* The account deletion dialog (Kassza's .et-profile-dialog-text / .et-profile-banner). */
.et-profile-dialog-text { font-size: 13.5px; line-height: 1.55; color: var(--et-color-ink-2); margin-bottom: 12px; }
.et-profile-dialog-banner { margin-bottom: 10px; }

/* ── The closed-beta gate card (BetaGateCard, spec D37) — Kassza's rules ── */
.et-beta-gate {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding-top: 16px;
}
.et-beta-gate-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--et-color-ink);
    margin-bottom: 6px;
}
.et-beta-gate-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--et-color-ink-2);
    margin-bottom: 16px;
}
.et-beta-gate-field { margin-bottom: 14px; }
.et-beta-gate-logout {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

/* ── Invite links (spec D40) — Kassza's .et-invite-* rules, trimmed to the starter's markup ── */
/* Meghívó elfogadása (/invite/{token}) page chrome, signed in: no page header of its own — the
   card is centered and capped at 480px. A visitor sees the same content in AuthLayout's card. */
.et-invite-page {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding-top: 16px;
}
/* Lead line above the inviter ("Meghívást kaptál tőle:"). */
.et-invite-lead {
    font-size: 13px;
    color: var(--et-color-ink-2);
    margin-bottom: 10px;
}
/* Loading skeleton only: a circle and two bars where the inviter will be. */
.et-invite-group {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.et-invite-group-text { min-width: 0; }
.et-invite-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--et-color-ink-2);
    margin-bottom: 16px;
    text-align: center;
}
.et-invite-status-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--et-color-ink);
    margin-bottom: 6px;
}
.et-invite-status-body {
    font-size: 13px;
    color: var(--et-color-ink-2);
    margin-bottom: 16px;
}
/* Loading placeholder mirrors the resolved card's rhythm (lead, inviter row, CTA) so the swap
   doesn't jump. */
.et-invite-skeleton {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.et-invite-skeleton .et-invite-group { margin-bottom: 0; }
.et-invite-skeleton .et-invite-group-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
/* InvitePanel: the "after you create it" list inside the info banner. */
.et-invite-explainer {
    margin: 6px 0 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* The generated link: one line, cut with an ellipsis. The DOM holds the whole link, so copy,
   Share and a select-all all take it in full. */
.et-invite-generated {
    padding: 12px;
    border-radius: 12px;
    background: var(--et-color-surface-2);
    border: 1px solid var(--et-color-border);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--et-color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: all;
}
/* The generated link as a QR code, with its one-line hint underneath. */
.et-invite-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
/* Capped: without a max-width the base .et-qr-code rule (width:100%) fills the whole sheet
   body on a phone, crowding the hint and the footer below it. */
.et-invite-qr .et-qr-code {
    max-width: 200px;
}
.et-invite-qr-hint {
    font-size: 12.5px;
    color: var(--et-color-ink-2);
}
/* An active link: EtCrudRow's lead and text, then copy and revoke beside it. */
.et-invite-link-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 6px;
}
.et-invite-link-row .et-crud-row {
    flex: 1;
    min-width: 0;
}