/* Nakładki · the public generator "Nakładka z AI" (/ai and /ai/{id}, prototype A_AI.dc.html, contract E7 §4): what the
   live generator adds to the AI page of site.css (.site-gen: the form, the card, the box of credits): the style
   picker, the progress bar of a job with its status line, the refusals, the sign-in state of a guest, the results
   with their tiles over the checkerboard, and the packs of the box of credits. The values are the prototype's, every
   var() with its value as the fallback. Mobile first, 44 px targets; no inline styles (public/assets/js/ai.js only
   switches classes, the hidden attribute and the value of the bar). */

.site-gen__card [hidden] { display: none; }

/* The notice of a paused generator above the form (A_AI's place of the staff notice), and the one after "Dodaj do mojej
   strony": a note's links take its colour (app.css), its button keeps the white of the ink pill. */
.gen-paused, .gen-added { margin-top: 20px; }
.gen-added .btn, .gen-added .btn:hover { color: var(--nk-on-ink, #FFFFFF); }

/* The style picker (Krzysztof, 4.11.2026): a tile per style with its radio in the corner, the thumbnail of its most
   popular example over the checkerboard (or a ring drawn in the style's mood), its name and its look in a few words;
   "Dowolny styl" first. Two tiles a row on a phone, more as the form grows; the ticked one ringed in ink. */
.gen-styles { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.gen-styles__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; margin-top: 4px; }
.gen-style { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 14px 10px 12px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-box, 16px); background: var(--nk-surface, #FFFFFF); text-align: center; cursor: pointer; transition: border-color var(--nk-motion-fast, 150ms) var(--nk-ease, ease), box-shadow var(--nk-motion-fast, 150ms) var(--nk-ease, ease); }
.gen-style:hover { border-color: var(--nk-line-strong, #D6D2C9); }
.gen-style:has(.gen-style__input:checked) { border-color: var(--nk-ink, #0B1220); box-shadow: 0 0 0 1px var(--nk-ink, #0B1220); }
.gen-style__input { position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; margin: 0; accent-color: var(--nk-ink, #0B1220); }
.gen-style__art { position: relative; display: block; width: 100%; max-width: 96px; height: auto; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(var(--nk-surface-2, #EFEDE7) 0 25%, var(--nk-surface, #FFFFFF) 0 50%) 50% / 12px 12px; }
.gen-style__name { font-size: 15px; font-weight: 600; color: var(--nk-ink, #0B1220); }
.gen-style__hint { font-size: 13px; line-height: 1.35; color: var(--nk-muted, #5D6372); }
/* A style without an example yet: its ring around the checkerboard hole. */
span.gen-style__art::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: repeating-conic-gradient(var(--nk-surface-2, #EFEDE7) 0 25%, var(--nk-surface, #FFFFFF) 0 50%) 50% / 10px 10px; box-shadow: 0 0 0 2px var(--nk-surface, #FFFFFF); }
.gen-style__art--dowolny { background: conic-gradient(var(--nk-ink, #0B1220), var(--nk-link-hover, #1C5F99), var(--nk-success-dot, #1E7B3C), var(--nk-warn-dot, #C27C0E), var(--nk-ink, #0B1220)); }
.gen-style__art--grand-badge { background: conic-gradient(#C27C0E, #F2C66D, #A3262A, #F2C66D, #C27C0E); }
.gen-style__art--minimal-linia { background: radial-gradient(circle closest-side, #FFFFFF 86%, var(--nk-ink, #0B1220) 87% 90%, #FFFFFF 91%); box-shadow: inset 0 0 0 1px var(--nk-line, #E3E0D9); }
.gen-style__art--scena { background: linear-gradient(#8EC5E8 0 52%, #F2C66D 52% 60%, #5E9A5B 60%); }
.gen-style__art--wzor-ikon { background: radial-gradient(circle, #C27C0E 0 2px, transparent 3px) 0 0 / 12px 12px, radial-gradient(circle, #1C5F99 0 2px, transparent 3px) 6px 6px / 12px 12px, #FFFFFF; box-shadow: inset 0 0 0 1px var(--nk-line, #E3E0D9); }
.gen-style__art--ornament-ludowy { background: repeating-conic-gradient(#A3262A 0 12deg, #FFFFFF 12deg 18deg); }
.gen-style__art--vintage-stempel { background: radial-gradient(circle closest-side, #F3E3C3 78%, #8A5A2B 79% 90%, #F3E3C3 91%); }

/* The progress of a working job (Krzysztof, 4.11.2026: a bar instead of the five steps): the ring that draws itself
   around the checkerboard hole, the status line, the bar and the time under it; only while the job runs (gen-run). The
   status line (the queue, a wait, the running stage) is a live region that stays in the page while it is empty, so a
   screen reader hears what ai.js writes into it; empty it takes no room, nor does the card's gap after it. */
.gen-progress { display: flex; align-items: center; gap: 18px; min-width: 0; }
.site-gen__card > .gen-progress:not(.gen-run) { margin-bottom: -18px; }
.gen-progress__main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-width: 0; }
.gen-progress:not(.gen-run) .gen-anim, .gen-progress:not(.gen-run) .gen-bar, .gen-progress:not(.gen-run) .gen-eta { display: none; }
.gen-msg { font-size: 15px; font-weight: 600; color: var(--nk-ink-2, #3A4050); }
.gen-anim { position: relative; flex: 0 0 auto; width: 72px; height: 72px; }
.gen-anim__ring, .gen-anim__hole { position: absolute; border-radius: 50%; }
.gen-anim__ring { inset: 0; background: conic-gradient(var(--nk-ink, #0B1220), var(--nk-link-hover, #1C5F99), var(--nk-success-dot, #1E7B3C), var(--nk-warn-dot, #C27C0E), var(--nk-ink, #0B1220)); animation: gen-spin 2.4s linear infinite; }
.gen-anim__hole { inset: 10px; background: repeating-conic-gradient(var(--nk-surface-2, #EFEDE7) 0 25%, var(--nk-surface, #FFFFFF) 0 50%) 50% / 12px 12px; box-shadow: 0 0 0 3px var(--nk-surface, #FFFFFF); animation: gen-breathe 2.4s ease-in-out infinite; }
@keyframes gen-spin { to { transform: rotate(1turn); } }
@keyframes gen-breathe { 50% { transform: scale(0.9); } }
/* The bar: ink on the light track, a glint running over the done part, the width easing between two answers. */
.gen-bar { display: block; width: 100%; height: 12px; border: 0; border-radius: var(--nk-r-pill, 999px); background: var(--nk-surface-2, #EFEDE7); color: var(--nk-ink, #0B1220); overflow: hidden; appearance: none; }
.gen-bar::-webkit-progress-bar { border-radius: var(--nk-r-pill, 999px); background: var(--nk-surface-2, #EFEDE7); }
.gen-bar::-webkit-progress-value { border-radius: var(--nk-r-pill, 999px); background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%) 0 0 / 200% 100%, var(--nk-ink, #0B1220); transition: width 1.8s linear; animation: gen-shine 1.8s linear infinite; }
.gen-bar::-moz-progress-bar { border-radius: var(--nk-r-pill, 999px); background: var(--nk-ink, #0B1220); }
@keyframes gen-shine { from { background-position: 100% 0, 0 0; } to { background-position: -100% 0, 0 0; } }
.gen-eta { font-size: 14px; color: var(--nk-muted, #5D6372); }
/* Where a failed job stopped, and the way of an admin to its "Przebieg". */
.gen-stop { font-size: 14px; color: var(--nk-ink-2, #3A4050); }
.gen-staff { margin: 12px 0 0; font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .gen-anim__ring, .gen-anim__hole { animation: none; }
  .gen-bar::-webkit-progress-value { animation: none; transition: none; }
}
@media (forced-colors: active) {
  .gen-bar { border: 1px solid CanvasText; }
  .gen-style:has(.gen-style__input:checked) { outline: 2px solid Highlight; }
}

/* What the card holds besides the steps: the line before a job, the sign-in state, the end of a job. */
.gen-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* A refusal that belongs to the card, with "Zobacz postęp" for the job that still works. */
.gen-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.gen-alert .msg { flex: 1 1 320px; min-width: 0; }
/* A guest of the live generator: the account it needs and both ways to the login (the box of "Wkrótce"). */
.gen-signin { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: var(--nk-r-box, 16px); background: var(--nk-bg, #F7F6F2); }
.gen-signin__text { font-size: 15px; font-weight: 600; color: var(--nk-ink, #0B1220); }
/* Without JavaScript: the reload of a working job's page and the way to stop it (inside <noscript>). */
.gen-refresh { font-size: 14px; color: var(--nk-muted, #5D6372); }
/* "Inne warianty", "Spróbuj jeszcze raz" and "Dodaj do mojej strony" (PRJ's form project/_add, whose rules are in
   account.css, which this page does not load): forms among the links of the card, each button at its own height. */
.gen-actions { align-items: center; }
.gen-again { display: flex; margin: 0; }
.gen-actions .acc-addto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.gen-actions .acc-addto__select { width: auto; min-width: 0; max-width: 100%; min-height: 44px; font-size: 14px; }

/* The results (A_AI): the colours and the text, then a tile per variant: the overlay in a circle over the transparent
   checkerboard, its name, "Wybrany" on the chosen one (the prototype's ink ring) or "Wybierz ten wariant". Two tiles a
   row on a phone, three side by side from about 600 px. */
.gen-results { display: flex; flex-direction: column; gap: 16px; }
.gen-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; color: var(--nk-ink-2, #3A4050); }
.gen-facts strong { color: var(--nk-ink, #0B1220); }
.gen-tiles { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gen-tile { display: flex; flex: 1 1 140px; flex-direction: column; align-items: center; gap: 10px; min-width: 0; max-width: 200px; padding: 14px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-panel, 20px); background: var(--nk-surface, #FFFFFF); text-align: center; }
.gen-tile--chosen { box-shadow: 0 0 0 2px var(--nk-ink, #0B1220); }
.gen-tile__img { display: block; width: 100%; max-width: 150px; height: auto; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(var(--nk-surface-2, #EFEDE7) 0 25%, var(--nk-surface, #FFFFFF) 0 50%) 50% / 16px 16px; }
.gen-tile__name { font-size: 15px; font-weight: 600; }

/* The box of credits (A_AI): the balance and its lines, the two packs (the second in ink), a refusal at the top. */
.gen-credits__text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gen-credits__msg { flex: 1 1 100%; font-size: 15px; font-weight: 600; color: var(--nk-danger-ink, #6B1A1D); }
.gen-packs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gen-pack { min-height: 48px; padding: 0 20px; }
.gen-pack--light { border: 1px solid var(--nk-ink, #0B1220); background: var(--nk-surface, #FFFFFF); color: var(--nk-ink, #0B1220); }
.gen-pack--light:hover { color: var(--nk-ink, #0B1220); }
/* A pack while credits are not sold to the person: its price without a link. */
.gen-pack--off { display: inline-flex; align-items: center; border: 1px dashed var(--nk-line-dashed, #B9B3A6); border-radius: var(--nk-r-pill, 999px); font-weight: 600; color: var(--nk-ink-2, #3A4050); }
.gen-pack--main { border-style: solid; border-color: var(--nk-ink, #0B1220); color: var(--nk-ink, #0B1220); }