/* Nakładki · the account area (prototype Wersja A): the login screens of A_Konto.dc.html (.auth) and "Twoje konto" of
   A_Uzytkownik.dc.html (.acc). The values are the prototype's; colours, radii and lines are the tokens of
   nk-tokens.css, every var() with the prototype value as its fallback. The building blocks of app.css (.card, .btn,
   .input, .field, .check, .avatar, .msg, .badge, .vh) do the rest.

   Login    .auth (the card: 480 px, its parts 18 px apart), .auth__title, .auth__form, .auth__checks, .auth__fine,
            .auth__links with .auth__link (+ --muted) and .auth__resend, .auth__toast
   Account  .acc (the side column and the content, wrapping on a phone), .acc-side (the <aside>), .acc-me, .acc-nav
            (+ __item, __count), .acc-main (the <main>), .acc-toast, .acc-top, .acc-lead, .acc-note, .acc-fine, .acc-empty
   Pulpit   .acc-ways, .acc-way (+ --dark), .acc-duo, .acc-panel, .acc-more, .acc-privacy, .acc-recent ("Ostatnio
            używane"), .acc-previews and .acc-preview (88 px previews of the AI projects)
   Projekty .acc-projects, .acc-project (+ __art, __img, __next, __body, __head, __name, __meta, __link, __url, __note,
            __actions, __confirm), .acc-addto ("Dodaj do mojej strony"), .acc-pager; the checkerboard of a transparent
            window under every preview of an AI overlay (contract E7 §6.1)
   Historia .acc-keep (the form of the switch), .acc-switch, .acc-bar, .acc-chips, .acc-chip, .acc-clear, .acc-list,
            .acc-hlist and .acc-hrow (+ __text, __head, __name, __meta), .acc-hthumb (+ --48, --52, --none), .acc-tag
            (+ --ai), .acc-star ("☆ Zapisz"), .acc-open (contract E7 §6.2)
   Kredyty  .acc-credits, .acc-balance, .acc-box (+ --buy, --form), .acc-packs, .acc-pack (+ --main), .acc-tick,
            .acc-ledger
   Strony   .acc-page (+ --invite), .acc-thumb (account/_thumb.php), .acc-add
   Settings .acc-box--mail, --list, --data; .acc-row, .acc-form (a form of one text button: "Wyloguj" beside a device,
            the copy of the data), .acc-consents (the form of the switches), .acc-toggle, .acc-save, .acc-textbtn
            (+ --sm, --muted, --danger), .acc-details, .acc-confirm; "Zmień adres", "Usuń konto" and their code steps:
            .acc-change (+ __row, __field, __btn, __code), .acc-step (+ __text, __note), .acc-links, .acc-addr (a
            half-hidden address in one piece), .acc-held (the pages that hold up a deletion) */

/* The titles that are not h1 to h6 elements (an empty state, a way in, a page of "Moje strony"): the display face of
   the headings (app.css). */
.acc-empty__title, .acc-way__title, .acc-page__name { font-family: var(--nk-font-display, 'Hanken Grotesk', 'Sofia Sans', system-ui, sans-serif); }

/* ---- Login (A_Konto): one card in the middle of the column, the title up to 40 px. */
.auth { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.auth__title { font-size: clamp(30px, 4vw, 40px); }
.auth strong { color: var(--nk-ink, #0B1220); overflow-wrap: anywhere; }
.auth__form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.auth__checks { display: flex; flex-direction: column; gap: 12px; }
.auth__fine { font-size: 14px; color: var(--nk-muted, #5D6372); }
/* The links of the card keep their colour on hover, as in the prototype (its inline colours beat a:hover). */
.auth__fine a, .auth__fine a:hover { color: var(--nk-muted, #5D6372); }
/* "Wyślij ponownie" (a form of its own) and "Zmień adres": 15 px, underlined, 44 px high. */
.auth__links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; }
.auth__resend { display: inline-flex; margin: 0; }
.auth__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--nk-ink, #0B1220); font-weight: 600; text-decoration: underline; }
.auth__link:hover { color: var(--nk-ink, #0B1220); }
.auth__link--muted, .auth__link--muted:hover { color: var(--nk-muted, #5D6372); font-weight: 400; }
.auth__toast { font-size: 15px; font-weight: 600; }
/* The news under the links describes the code field, which takes the focus: on a short phone the field scrolls up with
   room under it for "Zaloguj", the links and the news. */
html:has(.auth__toast) { scroll-padding-bottom: 208px; }

/* ---- "Twoje konto" (A_Uzytkownik): the side column of 230 px and the content beside it; on a phone the content goes
   under the column. */
.acc { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
/* "Anuluj" of a confirmation waits hidden for account.js (.btn would show it). */
.acc [hidden] { display: none !important; }
.acc-side { flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.acc-me { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-box, 16px); background: var(--nk-surface, #FFFFFF); }
.acc-me__text { display: flex; flex-direction: column; min-width: 0; }
.acc-me__mail { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-me__credits { font-size: 14px; color: var(--nk-muted, #5D6372); }
/* The sections: 44 px rows, the current one in ink, a count pill on the right. */
.acc-nav { display: flex; flex-direction: column; gap: 4px; }
.acc-nav__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--nk-r-control, 12px); color: var(--nk-ink, #0B1220); font-size: 16px; font-weight: 600; text-decoration: none; }
/* Hover changes nothing here, as in the prototype; the focus ring of app.css stays. */
.acc-nav__item:hover { color: var(--nk-ink, #0B1220); }
.acc-nav__item[aria-current="page"], .acc-nav__item[aria-current="page"]:hover { background: var(--nk-ink, #0B1220); color: var(--nk-on-ink, #FFFFFF); }
.acc-nav__count { box-sizing: content-box; min-width: 22px; padding: 1px 8px; border-radius: var(--nk-r-pill, 999px); background: var(--nk-surface-3, #ECE9E2); color: var(--nk-ink, #0B1220); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.acc-nav__item[aria-current="page"] .acc-nav__count { background: var(--nk-surface, #FFFFFF); }
.acc-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
/* The message on top of a section: the dark toast of the prototype (16 px), or an error. The toast is always there as
   a live region; empty, it takes no room (its height and the gap after it are gone) until a switch fills it. */
.acc-toast { font-size: 16px; }
.acc-toast:empty { padding: 0; border: 0; margin-bottom: -18px; }
.acc-lead { margin-top: 6px; color: var(--nk-muted, #5D6372); }
/* The title with an action on its right (Projekty AI, Historia). */
.acc-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
/* A note in the colours of the prototype's "Historia jest wyłączona": what does not work yet. Empty (the history is
   on), it takes no room, and account.js fills it in place when the switch goes off. */
.acc-note { padding: 12px 16px; border-radius: var(--nk-r-field, 14px); background: var(--nk-warn-bg, #FBF0D9); color: var(--nk-warn, #5C3B00); }
.acc-note:empty { display: none; }
/* "Otwórz edytor" after "Dodaj do mojej strony": a link in the toast, in its own colour, 44 px high. */
.acc-toast__link, .acc-toast__link:hover { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: var(--nk-on-ink, #FFFFFF); text-decoration: underline; }
.acc-fine { font-size: 14px; color: var(--nk-muted, #5D6372); }
/* The empty state of a section: a white card with a title, a line and the first step. */
.acc-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-panel, 20px); background: var(--nk-surface, #FFFFFF); }
.acc-empty__title { font-size: 22px; font-weight: 600; }
.acc-empty__text { max-width: 520px; color: var(--nk-muted, #5D6372); }
/* Projekty AI: the line under the (empty) list of projects keeps the list's place. */
.acc-empty + .acc-fine { margin-top: 18px; }

/* ---- Pulpit: two ways in (white and ink), then the last overlays and the AI projects, then the line about photos. */
.acc-ways { display: flex; flex-wrap: wrap; gap: 16px; }
.acc-way { flex: 1 1 280px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 22px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-panel, 20px); background: var(--nk-surface, #FFFFFF); color: var(--nk-ink, #0B1220); text-decoration: none; }
.acc-way:hover { color: var(--nk-ink, #0B1220); }
.acc-way--dark { border: 0; background: var(--nk-ink, #0B1220); color: var(--nk-on-ink, #FFFFFF); }
.acc-way--dark:hover { color: var(--nk-on-ink, #FFFFFF); }
.acc-way__text { display: flex; flex-direction: column; gap: 4px; }
.acc-way__title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.acc-way__note { color: var(--nk-muted, #5D6372); }
.acc-way--dark .acc-way__note { color: var(--nk-dark-text-2, #C9CED8); }
.acc-way__go { font-weight: 600; }
.acc-duo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
.acc-panel { min-width: 0; padding: 22px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-panel, 20px); background: var(--nk-surface, #FFFFFF); }
.acc-panel--recent { flex: 3 1 380px; }
.acc-panel--ai { flex: 2 1 280px; }
.acc-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.acc-panel__head--l { margin-bottom: 12px; }
.acc-panel__empty { padding: 12px 0; color: var(--nk-muted, #5D6372); }
/* "Cała historia", "Wszystkie": 40 px like the prototype, a band above and below keeps the target 44 px. */
.acc-more { position: relative; display: inline-flex; align-items: center; min-height: 40px; color: var(--nk-ink, #0B1220); font-size: 15px; font-weight: 600; text-decoration: none; }
.acc-more::after { content: ''; position: absolute; top: -2px; right: 0; bottom: -2px; left: 0; }
.acc-more:hover { color: var(--nk-ink, #0B1220); }
.acc-privacy { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--nk-muted, #5D6372); }

/* ---- Historia: the switch beside the title (in its form, with "Zapisz" when there is no JavaScript), the filter chips
   (40 px, a 44 px target), the list in a white card. */
.acc-keep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.acc-switch { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.acc-switch input { width: 20px; height: 20px; margin: 0; accent-color: var(--nk-ink, #0B1220); }
.acc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.acc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-chip { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--nk-line-strong, #D6D2C9); border-radius: var(--nk-r-pill, 999px); background: var(--nk-surface, #FFFFFF); color: var(--nk-ink, #0B1220); font-size: 14px; font-weight: 600; text-decoration: none; }
.acc-chip::after { content: ''; position: absolute; top: -3px; right: 0; bottom: -3px; left: 0; }
.acc-chip:hover { color: var(--nk-ink, #0B1220); }
.acc-chip[aria-current="page"], .acc-chip[aria-current="page"]:hover { border-color: var(--nk-ink, #0B1220); background: var(--nk-ink, #0B1220); color: var(--nk-on-ink, #FFFFFF); }
.acc-list { padding: 4px 22px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-panel, 20px); background: var(--nk-surface, #FFFFFF); }
.acc-list__empty { padding: 18px 0; color: var(--nk-muted, #5D6372); }

/* ---- Kredyty: the balance in ink beside the packs, then the invoice data and the history of credits. */
.acc-credits { display: flex; flex-wrap: wrap; align-items: stretch; gap: 18px; }
.acc-balance { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--nk-r-panel, 20px); background: var(--nk-ink, #0B1220); color: var(--nk-on-ink, #FFFFFF); }
.acc-balance__label { color: var(--nk-dark-muted, #B4BAC6); }
.acc-balance__n { font-size: 56px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.acc-balance__note { color: var(--nk-dark-text-2, #C9CED8); }
.acc-box { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-panel, 20px); background: var(--nk-surface, #FFFFFF); }
.acc-box--buy { flex: 2 1 380px; min-width: 0; }
.acc-packs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.acc-pack { flex: 1 1 140px; min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 14px 16px; border: 1px solid var(--nk-line-strong, #D6D2C9); border-radius: var(--nk-r-box, 16px); background: var(--nk-surface, #FFFFFF); color: var(--nk-ink, #0B1220); }
.acc-pack--main { border-color: var(--nk-ink, #0B1220); background: var(--nk-ink, #0B1220); color: var(--nk-on-ink, #FFFFFF); }
.acc-pack__n { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.acc-pack__note { font-size: 14px; }
.acc-tick { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.acc-tick input { width: 18px; height: 18px; margin: 0; accent-color: var(--nk-ink, #0B1220); }
.acc-ledger { overflow-x: auto; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-panel, 20px); background: var(--nk-surface, #FFFFFF); }
.acc-ledger h2 { padding: 20px 22px 6px; }
.acc-ledger__empty { padding: 4px 22px 20px; color: var(--nk-muted, #5D6372); }

/* ---- Pulpit (contract E7 §6.2): "Ostatnio używane" as rows of the history (48 px thumbnails, "Użyj ponownie"), the AI
   projects as 88 px previews that lead to their cards. */
.acc-recent, .acc-hlist, .acc-previews { margin: 0; padding: 0; list-style: none; }
.acc-previews { display: flex; flex-wrap: wrap; gap: 12px; }
.acc-preview { display: block; width: 88px; height: 88px; border-radius: var(--nk-r-field, 14px); overflow: hidden; }
.acc-preview__img { display: block; width: 88px; height: 88px; }

/* The checkerboard of a transparent window, under every preview of an AI overlay (as on the results of /ai). */
.acc-preview__img, .acc-project__img, .acc-hthumb {
  background: repeating-conic-gradient(var(--nk-surface-3, #ECE9E2) 0% 25%, var(--nk-surface, #FFFFFF) 0% 50%) 50% / 16px 16px;
}

/* ---- Projekty AI (contract E7 §6.1, A_Uzytkownik): a white card per project, the 132 px preview with "Wariant 1 z 3"
   under it on the left, the name, its pill and tag, the description and the day, the link, the buttons. */
.acc-projects { display: flex; flex-wrap: wrap; gap: 16px; }
.acc-project { flex: 1 1 300px; min-width: 0; display: flex; flex-wrap: wrap; gap: 16px; padding: 18px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-panel, 20px); background: var(--nk-surface, #FFFFFF); }
.acc-project__art { flex: 0 0 132px; width: 132px; display: flex; flex-direction: column; gap: 8px; }
.acc-project__img { display: block; width: 132px; height: 132px; border-radius: var(--nk-r-field, 14px); }
/* "Wariant 1 z 3 →": 36 px like the prototype, a band above and below keeps the target 44 px. */
.acc-project__next { position: relative; display: block; min-height: 36px; line-height: 36px; color: var(--nk-ink, #0B1220); font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; }
.acc-project__next::after { content: ''; position: absolute; top: -4px; right: 0; bottom: -4px; left: 0; }
.acc-project__next:hover { color: var(--nk-ink, #0B1220); text-decoration: underline; }
.acc-project__body { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.acc-project__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.acc-project__name { font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.acc-project__meta { font-size: 14px; color: var(--nk-muted, #5D6372); overflow-wrap: anywhere; }
.acc-project__link { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: 14px; }
.acc-project__url { color: var(--nk-ink-2, #3A4050); overflow-wrap: anywhere; }
.acc-project__note { font-size: 14px; color: var(--nk-warn, #5C3B00); }
.acc-project__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
/* "Nie pokazuj jako przykładu" of a project (the examples of the styles on /ai) with its "Zapisz". */
.acc-project__example { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0; }
.acc-project__confirm { margin: 0; }
/* "Dodaj do mojej strony": the choice of pages (40 px, a 44 px target with the gap) before its button. */
.acc-addto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.acc-addto__select { width: auto; min-width: 0; max-width: 100%; min-height: 44px; font-size: 14px; }
/* The pages of a list: "Poprzednia strona", "Strona 1 z 3", "Następna strona". */
.acc-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 15px; }
.acc-pager a { display: inline-flex; align-items: center; min-height: 44px; color: var(--nk-ink, #0B1220); font-weight: 600; }

/* ---- Historia (contract E7 §6.2): "Wyczyść historię" beside the filters, the rows of the list under a soft line, each
   with its thumbnail, the name and tag, the meta, "☆ Zapisz" (a pill, ink while saved) and "Otwórz". */
.acc-clear { position: relative; display: inline-flex; align-items: center; min-height: 40px; color: var(--nk-danger, #A3262A); font-size: 15px; font-weight: 600; }
.acc-clear::after { content: ''; position: absolute; top: -2px; right: 0; bottom: -2px; left: 0; }
.acc-clear:hover { color: var(--nk-danger-ink, #6B1A1D); }
.acc-hrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 0; border-top: 1px solid var(--nk-surface-2, #EFEDE7); }
.acc-hrow:first-child { border-top: 0; }
.acc-hrow--recent { gap: 10px 14px; padding: 12px 0; border-top: 1px solid var(--nk-line-soft, #EFEDE7); }
.acc-hrow--recent:first-child { border-top: 1px solid var(--nk-line-soft, #EFEDE7); }
.acc-hrow__text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.acc-hrow--recent .acc-hrow__text { flex-basis: 180px; }
.acc-hrow__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.acc-hrow__name { font-weight: 600; overflow-wrap: anywhere; }
.acc-hrow__meta { font-size: 14px; color: var(--nk-muted, #5D6372); }
.acc-hthumb { display: block; flex: 0 0 auto; border-radius: var(--nk-r-pill, 999px); }
.acc-hthumb--48 { width: 48px; height: 48px; }
.acc-hthumb--52 { width: 52px; height: 52px; }
.acc-hthumb--none { background: var(--nk-surface-3, #ECE9E2); }
.acc-tag { padding: 1px 8px; border-radius: var(--nk-r-pill, 999px); background: var(--nk-surface-2, #EFEDE7); color: var(--nk-ink-2, #3A4050); font-size: 12px; font-weight: 600; }
.acc-tag--ai { background: var(--nk-success-bg, #E6F2EA); color: var(--nk-success, #1E5E30); }
.acc-star { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--nk-line-strong, #D6D2C9); border-radius: var(--nk-r-pill, 999px); background: transparent; color: var(--nk-ink, #0B1220); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.acc-star::after { content: ''; position: absolute; top: -3px; right: 0; bottom: -3px; left: 0; }
.acc-star[aria-pressed="true"] { border-color: var(--nk-ink, #0B1220); background: var(--nk-ink, #0B1220); color: var(--nk-on-ink, #FFFFFF); }
.acc-open { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---- Moje strony: a white card per page (the thumbnail, the name with its role, plan and people, the buttons). */
.acc-page { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 20px 22px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-panel, 20px); background: var(--nk-surface, #FFFFFF); }
.acc-thumb { display: block; flex: 0 0 auto; }
.acc-page__text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.acc-page__name { font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.acc-page__meta { font-size: 14px; color: var(--nk-muted, #5D6372); overflow-wrap: anywhere; }
.acc-page__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.acc-page__actions .btn { min-height: 44px; padding: 0 16px; }
.acc-page__actions .btn--ghost:hover { border-color: var(--nk-line-strong, #D6D2C9); }
.acc-add { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---- Ustawienia: white cards; rows of devices and teams under a soft line; switches on the right; text buttons. */
.acc-box--mail { gap: 10px; }
.acc-box--list { gap: 6px; }
.acc-box--list h2 { margin-bottom: 4px; }
.acc-box--data { gap: 8px; }
.acc-mail { overflow-wrap: anywhere; }
.acc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--nk-line-soft, #EFEDE7); }
.acc-row__text { display: flex; flex-direction: column; min-width: 0; }
.acc-row__name { font-weight: 600; overflow-wrap: anywhere; }
.acc-row__meta { font-size: 14px; color: var(--nk-muted, #5D6372); }
.acc-row__ok { font-size: 14px; font-weight: 600; color: var(--nk-success, #1E5E30); }
.acc-row__note { font-size: 14px; color: var(--nk-muted, #5D6372); }
/* An open confirmation takes the whole width of its row. */
.acc-row .acc-details[open] { flex-basis: 100%; }
/* A form of one text button: "Wyloguj" on the right of its device's row, "Pobierz kopię moich danych" on its own line. */
.acc-form { display: flex; margin: 0; }
/* The consents: the switches and their notes in one form, 6 px apart like the rows of the box; "Zapisz" only without
   JavaScript. */
.acc-consents { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.acc-save { align-self: flex-start; margin-top: 6px; }
.acc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; cursor: pointer; }
/* The line above the second switch comes on top of its 44 px, as in the prototype (content-box). */
.acc-toggle--line { box-sizing: content-box; border-top: 1px solid var(--nk-line-soft, #EFEDE7); }
.acc-toggle input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--nk-ink, #0B1220); }
.acc-fine--toggle { margin-bottom: 6px; }
/* A button that reads as an underlined link, 44 px high ("Opuść zespół", "Usuń konto", the copy of the data); --sm is
   the 15 px "Wyloguj" beside a device. */
.acc-textbtn { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; color: var(--nk-ink, #0B1220); font-weight: 600; text-decoration: underline; cursor: pointer; }
.acc-textbtn:hover { color: var(--nk-ink, #0B1220); }
.acc-textbtn--sm { font-size: 15px; }
/* "Anuluj" of a code step, beside "Wyślij kod jeszcze raz": muted, like "Zmień adres" of the login's code screen. */
.acc-textbtn--muted, .acc-textbtn--muted:hover { color: var(--nk-muted, #5D6372); font-weight: 400; }
.acc-textbtn--danger, .acc-textbtn--danger:hover { color: var(--nk-danger, #A3262A); }
.acc-details > summary { list-style: none; }
.acc-details > summary::-webkit-details-marker { display: none; }
/* A confirmation in the danger colours of the prototype. */
.acc-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 0; padding: 14px 16px; border-radius: var(--nk-r-box, 16px); background: var(--nk-danger-bg, #F9E3E3); }
.acc-confirm--stack { flex-direction: column; align-items: stretch; gap: 10px; }
.acc-confirm__text { flex: 1 1 260px; font-size: 15px; color: var(--nk-danger-ink, #6B1A1D); }
.acc-confirm--stack .acc-confirm__text { flex: 0 0 auto; }
.acc-confirm__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-confirm .btn { min-height: 44px; padding: 0 16px; }
/* "Zmień adres" (A_Uzytkownik's emailEdit) and the code steps: a row of the field (label 15 px, field 46 px, growing
   from 260 px) and its 46 px pills, aligned at the bottom and wrapping on a phone; the message of the field stands
   under the row and describes the field. */
.acc-change { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.acc-details > .acc-change, .acc-details > .acc-step__text { margin-top: 6px; }
.acc-change__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.acc-change__field { flex: 1 1 260px; min-width: 0; gap: 6px; }
.acc-change__field--code { flex-grow: 0; }
.acc-change__btn, .acc-confirm .acc-change__btn { min-height: 46px; padding: 0 18px; }
.acc-change__code { font-size: 20px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
/* A field with a message that takes the focus (a step gives it autofocus) scrolls into view with room under it for the
   pills of a wrapped row and the message, which stands under the row. */
html:has(.acc-change .field__error) { scroll-padding-bottom: 128px; }
/* A step that waits for a code: where it went, the row, then "Wyślij kod jeszcze raz" and "Anuluj"; the note of a code
   sent again (or of the limit) under them, as on the login's code screen. */
.acc-step { display: flex; flex-direction: column; gap: 10px; }
.acc-step__text strong { overflow-wrap: anywhere; }
/* A half-hidden address ("a…@domena") stays in one piece: it breaks only when it is wider than its line. */
.acc-addr { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.acc-step__note { font-size: 15px; font-weight: 600; }
.acc-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
/* The pages that hold up "Usuń konto": a row each under a soft line, the name, and the panel tabs that free it. */
.acc-held { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.acc-held__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; padding: 4px 0; border-top: 1px solid var(--nk-danger-line, #E8B4B6); color: var(--nk-danger-ink, #6B1A1D); }
.acc-held__name { font-weight: 600; overflow-wrap: anywhere; }
.acc-held__links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.acc-held__link, .acc-held__link:hover { display: inline-flex; align-items: center; min-height: 44px; color: var(--nk-danger-ink, #6B1A1D); font-size: 15px; font-weight: 600; }
.acc-held__note { padding: 10px 0; font-size: 14px; }

/* Forced colours drop the fills: the current section and filter keep a mark of their own, the boxes a line. */
@media (forced-colors: active) {
  .acc-nav__item[aria-current="page"], .acc-chip[aria-current="page"], .acc-star[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; text-decoration: underline; }
  .acc-note, .acc-confirm, .acc-pack--main, .acc-balance, .acc-way--dark, .acc-nav__count { border: 1px solid CanvasText; }
}