/* Nakładki · the published page and the overlay module: prototype A_Nakladka.dc.html (the page; A_Telefon.dc.html is
   the same page at 390 px), Edytor.dc.html (the module), A_Wylaczona.dc.html (the page that is off) and
   Miniatura.dc.html (its miniature). The values are the prototype's inline styles; colours, radii and shadows come from
   nk-tokens.css, each with its fallback. Loaded after app.css (header, footer, .wrap, .btn, .vh), also by the widget
   frame (widget.css), and by the home page, whose studio is this module. The module stacks on a phone and stands in
   two columns from 760 px of module (container queries); on a page its preview grows with the height of the window;
   the rows of the page wrap. */

[hidden] { display: none !important; }

/* The title that is not an h1 to h6 element (the line of the way to "Nakładka z AI"; the module has no heading of its
   own): the display face of the headings (app.css). */
.nkm-ai__title { font-family: var(--nk-font-display, 'Hanken Grotesk', 'Sofia Sans', system-ui, sans-serif); }

/* ---- Page (A_Nakladka): the root is 17 px with line 1.55 (app.css body); the glow of the page colours behind the
   header and the top of the page (an SVG of _art.php, the prototype's glow()). */

.nkp { position: relative; isolation: isolate; min-height: 100vh; overflow-x: hidden; }
.nkp-glow { position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 1200px; max-height: 100%; overflow: hidden; pointer-events: none; }
.nkp-glow__svg { display: block; width: 100%; height: 100%; }

.nkp-main { padding-top: clamp(20px, 3vw, 36px); }

/* The name of the page with its avatar on the left, the path ("Nakładki / Kluby") on the right. */
.nkp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.nkp-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.nkp-id__text { min-width: 0; }
.nkp-avatar { flex: 0 0 auto; width: 56px; height: 56px; }
.nkp-avatar__svg { display: block; width: 100%; height: 100%; }
.nkp-avatar__core { fill: var(--nk-surface, #FFFFFF); }
.nkp-avatar__edge { fill: none; stroke: var(--nk-line, #E3E0D9); stroke-width: 1; }
.nkp-avatar__text { font-family: var(--nk-font, 'Sofia Sans', system-ui, sans-serif); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.nkp-avatar__text--ink { fill: var(--nk-ink, #0B1220); }
/* Up to three characters (BP, XXI) at the prototype's 16 px; four, which the prototype never shows, fit the white. */
.nkp-avatar__text--4 { font-size: 12px; }
/* The page's name balances its lines, so a short last word ("ZSE", "2027") is not left alone on a phone. */
.nkp-title { margin: 0; font-size: clamp(28px, 4vw, 44px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: anywhere; text-wrap: balance; }
.nkp-meta { margin: 2px 0 0; font-size: 15px; color: var(--nk-muted, #5D6372); overflow-wrap: anywhere; }
.nkp-crumbs { font-size: 14px; color: var(--nk-muted, #5D6372); }
.nkp-crumbs a { color: var(--nk-muted, #5D6372); }

/* Links inside a line of text keep the prototype's look; a band 44 px high, centred on the line, makes them 44 px
   targets whatever the height of the line. */
.nkp-crumbs a, .nkp-share a, .nkp-off__owner a, .nkp-off__report a { position: relative; }
.nkp-crumbs a::after, .nkp-share a::after, .nkp-off__owner a::after, .nkp-off__report a::after { content: ''; position: absolute; top: 50%; right: 0; left: 0; height: 44px; transform: translateY(-50%); }

/* A note instead of the module (no JavaScript, no overlays yet). */
.nkp-msg {
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: var(--nk-r-control, 12px);
  background: var(--nk-warn-bg, #FBF0D9);
  color: var(--nk-warn, #5C3B00);
  font-size: 15px;
  font-weight: 600;
}

/* Under the module: the address to send and the way to an own page, "Zgłoś stronę" in the muted colour. */
.nkp-share { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--nk-line, #E3E0D9); font-size: 15px; }
.nkp-share__address { color: var(--nk-ink-2, #3A4050); overflow-wrap: anywhere; }
.nkp-share__org { color: var(--nk-ink-2, #3A4050); }
.nkp-share__create { font-weight: 600; }
.nkp-share__org a:not(.nkp-share__create) { color: var(--nk-muted, #5D6372); }
.nkp-share a:hover { color: var(--nk-link-hover, #1C5F99); }

/* The footer of A_Nakladka: the compact one of app.css, a little slimmer, with the logo at 30 px. */
.nkp .site-foot--compact { margin-top: clamp(48px, 7vw, 80px); }
.nkp .site-foot__row { padding-top: 24px; padding-bottom: 24px; }
.nkp .site-foot__row .site-foot__logo { height: 30px; }

/* ---- Page that is off (A_Wylaczona): one centred card. */

.nkp-main--off { padding-top: clamp(48px, 8vw, 104px); padding-bottom: 48px; }
.nkp-off {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--nk-line, #E3E0D9);
  border-radius: var(--nk-r-hero, 28px);
  background: var(--nk-surface, #FFFFFF);
  text-align: center;
}
/* Miniatura.dc.html at 120 px, faded and grey. */
.nkp-mini { display: block; width: 120px; height: 120px; opacity: 0.45; filter: grayscale(1); }
.nkp-mini__svg { display: block; width: 100%; height: 100%; }
.nkp-mini__ring { fill: var(--nk-surface, #FFFFFF); }
.nkp-off__url { color: var(--nk-muted, #5D6372); font-size: 14px; overflow-wrap: anywhere; }
.nkp-off__title { margin: 0; font-size: clamp(30px, 4.4vw, 46px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; }
.nkp-off__text { max-width: 480px; color: var(--nk-muted, #5D6372); }
.nkp-off__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
/* 52 px and the line of the outlined one (the prototype sizes links without box-sizing); in one row the dark one
   stretches along. */
.nkp-off__actions .btn--ghost { min-height: 54px; }
.nkp-off__owner { margin-top: 8px; color: var(--nk-muted, #5D6372); font-size: 15px; }
.nkp-off__owner a { color: var(--nk-ink, #0B1220); font-weight: 600; }
.nkp-off__owner a:hover { color: var(--nk-link-hover, #1C5F99); }
.nkp-off__report { margin-top: 24px; text-align: center; font-size: 14px; }
.nkp-off__report a { color: var(--nk-muted, #5D6372); }

/* ---- Module (Edytor.dc.html, made smaller on 3.11.2026, laid out like the module of v1 the same day): its root is
   16 px with line 1.5 and a container (nkm). Below 760 px of module one column: the square (the field for the photo,
   then the preview) with the formats under it, then the settings, the page's overlays first. From 760 px two: the
   preview, as wide as --nkm-pv, and the settings (340 px and more). --nkm-pv is a plain 480 px here, so the widget
   frame, which is as high as its content, never depends on the height of the window (widget.css); a published page
   (below) and the studio of the home page (studio.css) size it by the window up to 480 px, so the whole module shows
   under the page's name and a wide window gives its width to the settings, not to the picture. Four kinds of control:
   the thumbnails (overlays, formats), the pills (ready texts, file type, variant and button of the post), the fields
   and boxes, the one dark button; one style of label, no capitals. */

.nkm { --nkm-pv: 480px; container: nkm / inline-size; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.5; }
.nkm-notice {
  padding: 12px 16px;
  border-radius: var(--nk-r-control, 12px);
  background: var(--nk-danger-bg, #F9E3E3);
  color: var(--nk-danger-ink, #6B1A1D);
  font-size: 15px;
  font-weight: 600;
}
/* The note of a draft preview: information, not an error. */
.nkm-notice.is-info {
  background: var(--nk-surface-2, #EFEDE7);
  color: var(--nk-ink-2, #3A4050);
}
.nkm-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
@container nkm (min-width: 760px) {
  .nkm-grid { grid-template-columns: minmax(0, var(--nkm-pv)) minmax(340px, 1fr); gap: 20px 32px; }
}
/* A browser without container queries goes by the width of the window. */
@supports not (container-type: inline-size) {
  @media (min-width: 840px) {
    .nkm-grid { grid-template-columns: minmax(0, var(--nkm-pv)) minmax(340px, 1fr); gap: 20px 32px; }
  }
}
.nkm-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* The settings in groups: on a page "Wybierz nakładkę" (two overlays or more, nkm-set--pick) and the text, in the
   studio the photo and the text; "Co pobrać", "Więcej opcji" and "Pobierz"; the way to AI and "Zgłoś problem". One
   under the other, so beside the largest preview (480 px) a module of 1160 px gives them one column of 648 px; where the
   column is 649 px or wider (a low window, whose preview stays at 440 px or less, a tablet under the preview) the
   overlays keep the whole row, the files stand on the right and the way to AI under the text, so a low window shows
   the whole module. The order of the page (and of the keyboard) stays the same. */
.nkm-settings { container: nkmset / inline-size; }
.nkm-set { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px 28px; }
.nkm-group { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@container nkmset (min-width: 649px) {
  .nkm-set { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "photo files" "help files"; }
  .nkm-group--photo { grid-area: photo; }
  .nkm-group--files { grid-area: files; }
  .nkm-group--help { grid-area: help; }
  .nkm-set--pick { grid-template-rows: auto auto 1fr; grid-template-areas: "pick pick" "photo files" "help files"; }
  .nkm-group--pick { grid-area: pick; }
  .nkm-group--text { grid-area: photo; }
}

/* On a published page the preview is as large as lets the whole module show under the page's name: the height of the
   window less the header, the name, the strip of overlays and a margin (306 px; 388 px under a name of two lines,
   nkm--name2 of _module.php), from 320 to 480 px; the small viewport height where the browser knows it. The settings in
   one column end about 680 px under the top of the module, so a window lower than 900 px (982 px under a long name)
   keeps the preview at 440 px or less, and the settings stand in two columns (above). */
.nkp .nkm { --nkm-pv: clamp(320px, calc(100vh - 306px), var(--nkm-pv-max, 480px)); }
.nkp .nkm.nkm--name2 { --nkm-pv: clamp(320px, calc(100vh - 388px), var(--nkm-pv-max, 480px)); }
@supports (height: 100svh) {
  .nkp .nkm { --nkm-pv: clamp(320px, calc(100svh - 306px), var(--nkm-pv-max, 480px)); }
  .nkp .nkm.nkm--name2 { --nkm-pv: clamp(320px, calc(100svh - 388px), var(--nkm-pv-max, 480px)); }
}
@media (max-height: 899px) {
  .nkp .nkm { --nkm-pv-max: 440px; }
}
@media (max-height: 981px) {
  .nkp .nkm.nkm--name2 { --nkm-pv-max: 440px; }
}

/* The big preview: a square of surface-2; a post or a story stands in it as a card with a shadow. */
.nkm-stage {
  container: nkmstage / inline-size;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--nk-r-panel, 20px);
  background: var(--nk-surface-2, #EFEDE7);
}
.nkm-stage[data-format="p34"], .nkm-stage[data-format="st"] { padding: 18px; }
.nkm-stage.is-drop { box-shadow: inset 0 0 0 3px var(--nk-ink, #0B1220); }
/* The field for the photo, the whole square of a page until there is a photo (as in v1): a dashed edge, the icon,
   "Wgraj zdjęcie", the file types and where the photo stays. Its file field covers it, so a click anywhere opens the
   files; a file dropped on the square is taken too (module.js). */
.nkm-drop {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  overflow: hidden;
  border: 2px dashed var(--nk-ink, #0B1220);
  border-radius: var(--nk-r-panel, 20px);
  background: radial-gradient(circle at 50% 42%, var(--nk-surface, #FFFFFF) 0, var(--nk-surface, #FFFFFF) 36%, var(--nk-surface-2, #EFEDE7) 100%);
  color: var(--nk-ink, #0B1220);
  text-align: center;
  cursor: pointer;
}
.nkm-stage.is-drop .nkm-drop { border-style: solid; background: var(--nk-surface-2, #EFEDE7); }
.nkm-drop:focus-within { outline: 3px solid var(--nk-link-hover, #1C5F99); outline-offset: -7px; }
.nkm-drop__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--nk-ink, #0B1220);
  color: var(--nk-on-ink, #FFFFFF);
}
.nkm-drop__title { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.nkm-drop__sub { color: var(--nk-muted, #5D6372); font-size: 15px; line-height: 1.35; }
.nkm-drop__types { margin-top: 6px; padding: 3px 12px; border-radius: var(--nk-r-pill, 999px); background: var(--nk-surface-2, #EFEDE7); color: var(--nk-ink-2, #3A4050); font-size: 13px; font-weight: 600; line-height: 1.4; }
.nkm-drop__note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; color: var(--nk-muted, #5D6372); font-size: 13px; line-height: 1.4; text-wrap: balance; }
.nkm-drop__note svg { flex: 0 0 auto; }
.nkm-frame {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
.nkm-stage[data-format="p34"] .nkm-frame, .nkm-stage[data-format="st"] .nkm-frame {
  border-radius: 10px;
  box-shadow: var(--nk-shadow-card, 0 1px 2px rgba(11, 18, 32, 0.08), 0 14px 30px rgba(11, 18, 32, 0.14));
}
.nkm-stage[data-format="p34"] .nkm-frame { aspect-ratio: 3 / 4; }
.nkm-stage[data-format="st"] .nkm-frame { aspect-ratio: 9 / 16; }
/* The grab hand of the prototype once module.js runs (the sample person moves too, with a mouse or a pen); a finger
   moves the picture only once it is the person's photo, so before that the page scrolls under it. studio.js sets the
   same two classes, with a photo only (its sample person stays put). */
.nkm-frame.is-pannable { cursor: grab; }
.nkm-frame.has-photo { touch-action: none; }
.nkm-frame.is-dragging { cursor: grabbing; }
.nkm-frame:focus-visible { outline: 3px solid var(--nk-link-hover, #1C5F99); outline-offset: -3px; }
.nkm-canvas { display: block; width: 100%; height: 100%; }
/* Covers the canvas, so "Save image" from the context menu has nothing to save. */
.nkm-shield { position: absolute; inset: 0; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* "Przykładowe zdjęcie" in the corner of the preview while it shows the sample person: module.js and studio.js show it
   and hide it again once the person's photo is there (without JavaScript the preview stays empty, and so does its
   corner). On a preview of 400 px or less (a phone, a low window) it takes two lines, clear of the nakladki.com.pl mark
   the picture has from 40 % of its width. */
.nkm-sample {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 3px 10px;
  border-radius: var(--nk-r-pill, 999px);
  background: var(--nk-surface, #FFFFFF);
  color: var(--nk-ink-2, #3A4050);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.12);
}
@container nkmstage (max-width: 400px) {
  .nkm-sample { max-width: 34%; padding: 3px 8px; border-radius: var(--nk-r-tag, 10px); font-size: 12px; line-height: 1.3; }
}

/* "Zmień" on the preview and "Dodaj swoje zdjęcie" at the top of the settings: the file field covers each of them. */
.nkm-file { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nkm-change {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  overflow: hidden;
  border-radius: var(--nk-r-pill, 999px);
  background: var(--nk-ink, #0B1220);
  color: var(--nk-on-ink, #FFFFFF);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(11, 18, 32, 0.22);
  cursor: pointer;
}
.nkm-add {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 14px;
  overflow: hidden;
  border: 1.5px dashed var(--nk-ink, #0B1220);
  border-radius: var(--nk-r-field, 14px);
  background: var(--nk-surface, #FFFFFF);
  cursor: pointer;
}
.nkm-add.is-drop { background: var(--nk-surface-2, #EFEDE7); }
.nkm-change:focus-within, .nkm-add:focus-within { outline: 3px solid var(--nk-link-hover, #1C5F99); outline-offset: 2px; }
.nkm-add__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nk-ink, #0B1220);
  color: var(--nk-on-ink, #FFFFFF);
}
.nkm-add__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.nkm-add__title { font-size: 16px; font-weight: 700; }
.nkm-add__sub { color: var(--nk-muted, #5D6372); font-size: 14px; }

/* With a photo, in the place of "Dodaj swoje zdjęcie" and as high: the hint and the zoom, in one row while they fit. The
   keyboard hint shows while the preview has the keyboard focus (screen readers get it from aria-describedby at any
   time). */
.nkm-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
  min-height: 56px;
  padding: 6px 14px;
  border: 1px solid var(--nk-line, #E3E0D9);
  border-radius: var(--nk-r-field, 14px);
  background: var(--nk-surface, #FFFFFF);
}
.nkm-tools__hint { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.nkm-tools__hint svg { flex: 0 0 auto; }
.nkm-tools__keys { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nkm:has(.nkm-frame:focus-visible) .nkm-tools__keys { position: static; order: 3; flex: 1 1 100%; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip-path: none; white-space: normal; color: var(--nk-muted, #5D6372); font-size: 13px; line-height: 1.4; }
.nkm-zoom { display: flex; flex: 1 1 180px; align-items: center; gap: 8px; color: var(--nk-muted, #5D6372); }
.nkm-zoom svg { flex: 0 0 auto; }
/* The slider is a 44 px target; its sides keep the 2 px the browser gives a range input. */
.nkm-range { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0 2px; accent-color: var(--nk-ink, #0B1220); cursor: pointer; }

/* The thumbnails, one look for the overlays and the formats (on a page "Wybierz nakładkę" and "Podgląd wszystkich
   formatów", in the studio the overlays under the preview and the formats of "Co pobrać"): a rounded square on the
   grey of the preview with a line, the chosen one in a ring of ink. */
.nkm-pick__art, .nkm-tab__art {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--nk-r-control, 12px);
  background: var(--nk-surface-2, #EFEDE7);
  box-shadow: 0 0 0 1px var(--nk-line, #E3E0D9);
}
.nkm-pick[aria-pressed="true"] .nkm-pick__art, .nkm-tab[aria-selected="true"] .nkm-tab__art, .nkm-tab[aria-pressed="true"] .nkm-tab__art { box-shadow: 0 0 0 2px var(--nk-surface, #FFFFFF), 0 0 0 4px var(--nk-ink, #0B1220); }
.nkm-pick__art canvas { display: block; width: 100%; height: 100%; -webkit-touch-callout: none; }
/* A format shows whole, as a small card in its square (the 3:4 post and the story upright), whatever size the scripts
   draw it: they keep its ratio. */
.nkm-tab__art { aspect-ratio: 1 / 1; }
.nkm-tab__art canvas { position: absolute; inset: 6px; display: block; width: auto; height: auto; max-width: calc(100% - 12px); max-height: calc(100% - 12px); margin: auto; border-radius: 3px; box-shadow: 0 1px 3px rgba(11, 18, 32, 0.18); -webkit-touch-callout: none; }
/* "Podgląd wszystkich formatów" under the square of a page: the four formats across its width, each with its name. */
.nkm-formats { display: flex; flex-direction: column; gap: 8px; }
.nkm-formats .nkm-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nkm-tab__name { display: block; margin-top: 6px; color: var(--nk-ink-2, #3A4050); font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.nkm-tab[aria-selected="true"] .nkm-tab__name { color: var(--nk-ink, #0B1220); }

/* The page's overlays (on a page at the top of the settings, in the studio under the preview): a thumbnail with the
   name under it. */
.nkm-picks__list { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.nkm-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 64px;
  max-width: 128px;
  padding: 4px 4px 0;
  border: 0;
  border-radius: var(--nk-r-field, 14px);
  background: transparent;
  color: var(--nk-ink, #0B1220);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}
.nkm-pick__art { width: 56px; height: 56px; }
.nkm-pick__name { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
/* "Wybierz nakładkę" of a page: larger thumbnails (72 px in a column of a phone), the chosen one with a tick in its
   corner too, as in v1. */
.nkm-group--pick { gap: 8px; }
.nkm-group--pick .nkm-pick { max-width: 112px; }
.nkm-group--pick .nkm-pick__art { width: 88px; height: 88px; }
.nkm-pick__tick {
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--nk-ink, #0B1220);
  color: var(--nk-on-ink, #FFFFFF);
  box-shadow: 0 0 0 2px var(--nk-surface, #FFFFFF);
}
.nkm-pick[aria-pressed="true"] .nkm-pick__tick { display: inline-flex; }
@container nkmset (max-width: 420px) {
  .nkm-group--pick .nkm-pick__art { width: 72px; height: 72px; }
}

/* The labels of the settings: plain words in the text face, no capitals. */
.nkm-label { color: var(--nk-ink, #0B1220); font-size: 15px; font-weight: 600; }
.nkm-opt { color: var(--nk-muted, #5D6372); font-weight: 400; }

/* "Twój tekst": the field with the counter, the ready texts under it. The edge of the field is --nk-line-input (3:1,
   WCAG 1.4.11), like every field of the site; the prototype draws it in --nk-line. */
.nkm-field { display: flex; flex-direction: column; gap: 8px; }
.nkm-input-wrap { position: relative; }
.nkm-input {
  width: 100%;
  min-height: 48px;
  padding: 0 64px 0 14px;
  border: 1px solid var(--nk-line-input, #7A7F8C);
  border-radius: var(--nk-r-field, 14px);
  background: var(--nk-surface, #FFFFFF);
  color: var(--nk-ink, #0B1220);
  font: inherit;
  font-size: 17px;
}
.nkm-count { position: absolute; top: 50%; right: 14px; color: var(--nk-muted, #5D6372); font-size: 13px; font-variant-numeric: tabular-nums; transform: translateY(-50%); pointer-events: none; }

/* The pill, the one control for every choice in words: a ready text, the file type, the variant, the button of the
   post. 40 px like the prototype's chips, a band above and below keeps the target 44 px; the chosen one in ink, as
   the chips of the pages in the studio. A long label of the organiser wraps onto a second line instead of being cut
   (WCAG 1.4.12). */
.nkm-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.nkm-pill {
  position: relative;
  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: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.nkm-pill::after { content: ''; position: absolute; top: -3px; right: 0; bottom: -3px; left: 0; }
.nkm-pill[aria-pressed="true"] { border-color: var(--nk-ink, #0B1220); background: var(--nk-ink, #0B1220); color: var(--nk-on-ink, #FFFFFF); }
/* From 760 px of module the page's overlays and the ready texts stand in one row that scrolls sideways when they do not
   fit, so many of them, or long ones, never make the module higher; 5 px around keep the focus ring and the bands of
   the pills inside it. On a phone they wrap. */
@container nkm (min-width: 760px) {
  .nkm-picks__list, .nkm-group--photo .nkm-pills, .nkm-group--text .nkm-pills { flex-wrap: nowrap; overflow-x: auto; margin: -5px; padding: 5px; }
  .nkm-pick, .nkm-group--photo .nkm-pill, .nkm-group--text .nkm-pill { flex: 0 0 auto; }
  .nkm-group--photo .nkm-pill, .nkm-group--text .nkm-pill { white-space: nowrap; }
}

/* "Co pobrać": the four formats in four columns of up to 112 px; the thumbnail shows the format on the big preview (a
   tab), the box under it, with the name and the size, puts it into "Pobierz". "Zaznacz wszystkie" beside the label:
   26 px, a band of 12 px above and 6 px below makes the target 44 px and ends where the thumbnails begin. */
.nkm-get { container: nkmget / inline-size; display: flex; flex-direction: column; gap: 6px; }
.nkm-get__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.nkm-all {
  position: relative;
  min-height: 26px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--nk-ink, #0B1220);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.nkm-all::after { content: ''; position: absolute; top: -12px; right: 0; bottom: -6px; left: 0; }
.nkm-tabs, .nkm-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 112px)); gap: 0 8px; }
.nkm-tab {
  display: block;
  min-width: 0;
  min-height: 44px;
  padding: 4px;
  border: 0;
  border-radius: var(--nk-r-box, 16px);
  background: transparent;
  cursor: pointer;
}
.nkm-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 0 2px;
  color: var(--nk-ink-2, #3A4050);
  cursor: pointer;
}
/* Ticked: the name in ink (the scripts set is-on; :has() covers a tick before they run, in a rule of its own so a
   browser without it keeps the first). */
.nkm-check.is-on { color: var(--nk-ink, #0B1220); }
.nkm-check:has(.nkm-check__box:checked) { color: var(--nk-ink, #0B1220); }
.nkm-check__box { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--nk-ink, #0B1220); cursor: pointer; }
.nkm-check__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nkm-check__name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.nkm-check__dims { color: var(--nk-muted, #5D6372); font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Too narrow for the box beside the name and the size (a phone, or a column of 400 px beside a low preview, where
   "1440×2560" would run into the next size): the box above them. A size too wide for its column (larger text, wider
   spacing) breaks after its "×", where the markup has a <wbr>. */
@container nkmget (max-width: 399px) {
  .nkm-check { flex-direction: column; gap: 2px; padding: 4px 0; text-align: center; }
  .nkm-check__name { font-size: 13px; }
}
/* A browser without container queries cannot tell how wide "Co pobrać" is (a phone, or a column of 340 px beside the
   preview in the fallback grid): there the box always stands above the name and the size. */
@supports not (container-type: inline-size) {
  .nkm-check { flex-direction: column; gap: 2px; padding: 4px 0; text-align: center; }
  .nkm-check__name { font-size: 13px; }
}
/* "Co pobrać" of a page, without the thumbnails (they stand under the square): a box per format across the width, as in
   v1, the ticked one with an edge of ink; in a narrow column the box over the name and the size, as above. */
.nkm-get--cards .nkm-checks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nkm-get--cards .nkm-check {
  justify-content: flex-start;
  gap: 8px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--nk-line, #E3E0D9);
  border-radius: var(--nk-r-control, 12px);
  background: var(--nk-surface, #FFFFFF);
}
.nkm-get--cards .nkm-check.is-on { border-color: var(--nk-ink, #0B1220); box-shadow: inset 0 0 0 1px var(--nk-ink, #0B1220); }
.nkm-get--cards .nkm-check:has(.nkm-check__box:checked) { border-color: var(--nk-ink, #0B1220); box-shadow: inset 0 0 0 1px var(--nk-ink, #0B1220); }
@container nkmget (max-width: 399px) {
  .nkm-get--cards .nkm-check { justify-content: center; gap: 4px; padding: 8px 2px; }
}
@supports not (container-type: inline-size) {
  .nkm-get--cards .nkm-check { justify-content: center; gap: 4px; padding: 8px 2px; }
}

/* "Więcej opcji": what most people never change, in a <details> that opens without JavaScript too. Its summary stays a
   list item, so it keeps the browser's open or closed triangle (forced colours too); closed, its line says what is
   chosen. */
.nkm-more { border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-field, 14px); background: var(--nk-surface, #FFFFFF); }
.nkm-more__sum { display: list-item; list-style-position: inside; min-height: 44px; padding: 10px 14px; font-size: 15px; font-weight: 600; line-height: 24px; cursor: pointer; }
.nkm-more__sum:focus-visible { border-radius: var(--nk-r-field, 14px); }
.nkm-more__now { margin-left: 6px; color: var(--nk-muted, #5D6372); font-size: 14px; font-weight: 500; }
.nkm-more[open] > .nkm-more__sum { border-bottom: 1px dashed var(--nk-line, #E3E0D9); }
.nkm-more__body, .nkm-more__post { display: flex; flex-direction: column; gap: 10px; }
.nkm-more__body { padding: 12px 14px 14px; }
.nkm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.nkm-row__label { flex: 0 0 140px; color: var(--nk-ink-2, #3A4050); font-size: 14px; font-weight: 600; }
.nkm-row .nkm-pills, .nkm-row .nkm-fact { flex: 1 1 180px; min-width: 0; }
.nkm-fact { display: flex; flex-direction: column; font-size: 14px; line-height: 1.35; }
.nkm-fact__main { font-weight: 600; }
.nkm-fact__sub { color: var(--nk-muted, #5D6372); font-size: 13px; }

/* The download and what follows it. */
.nkm-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--nk-r-box, 16px);
  background: var(--nk-ink, #0B1220);
  color: var(--nk-on-ink, #FFFFFF);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.nkm-download svg { flex: 0 0 auto; }
/* Greyed out only where no file can be made (a page that is off, a draft preview); while the files are prepared it
   keeps its look, as the prototype's never changes. */
.nkm-download:disabled { opacity: 0.45; cursor: not-allowed; }
.nkm-download[aria-busy="true"] { cursor: progress; }
/* The studio's own line when no format is ticked. */
.nkm-error { color: var(--nk-danger, #A3262A); font-size: 14px; font-weight: 600; }
/* The line of news (the prototype's toast and error): errors in red until the next news, "Skopiowano link" for 3.2 s
   (module.js); news a screen reader needs but the screen shows otherwise (loading, a photo added) stays out of sight,
   and so does the empty line. */
.nkm-status { color: var(--nk-ink, #0B1220); font-size: 14px; font-weight: 600; }
.nkm-status.is-error { color: var(--nk-danger, #A3262A); }
.nkm-status:empty, .nkm-status.is-quiet { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nkm-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  border: 1px solid var(--nk-line, #E3E0D9);
  border-radius: var(--nk-r-field, 14px);
  background: var(--nk-surface, #FFFFFF);
}
.nkm-done__title { font-weight: 700; }
/* The studio puts its files into a list of their own; on the line they stand as the module's. */
.nkm-done__list { display: contents; }
.nkm-done__item { display: inline-flex; align-items: center; gap: 10px; }
.nkm-done__img { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: var(--nk-r-tag, 10px); }
.nkm-done__save {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--nk-r-pill, 999px);
  background: var(--nk-ink, #0B1220);
  color: var(--nk-on-ink, #FFFFFF);
  font-weight: 600;
  text-decoration: none;
}
.nkm-done__save:hover { color: var(--nk-on-ink, #FFFFFF); }
/* On a page "Pobierz" saves the files at once (module.js); the line under it says which ones, and each link saves its
   file again where a browser held it back, so the links are quiet ones. */
.nkm-done--saved .nkm-done__save { gap: 8px; border: 1px solid var(--nk-line-strong, #D6D2C9); background: var(--nk-surface, #FFFFFF); color: var(--nk-ink, #0B1220); }
.nkm-done--saved .nkm-done__save:hover { color: var(--nk-ink, #0B1220); }
/* The arrow of "Pobierz" before the name, drawn here (an image of the stylesheet, CSP img-src data:), not by module.js. */
.nkm-done--saved .nkm-done__save::before {
  content: '';
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nkm-done__copy {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nk-ink, #0B1220);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* "Nie widzisz nakładki, jakiej chcesz?": one slim box with the way to "Nakładka z AI", after "Pobierz" (widget.css
   hides it in the frame). On its own row (a narrow column) the button keeps to the right. */
.nkm-ai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--nk-line, #E3E0D9);
  border-radius: var(--nk-r-field, 14px);
  background: var(--nk-surface, #FFFFFF);
}
.nkm-ai svg { flex: 0 0 auto; }
.nkm-ai__text { display: flex; flex: 1 1 220px; flex-direction: column; min-width: 0; line-height: 1.3; }
.nkm-ai__title { font-size: 15px; font-weight: 600; }
.nkm-ai__sub { color: var(--nk-muted, #5D6372); font-size: 13px; }
.nkm-ai__btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--nk-ink, #0B1220);
  border-radius: var(--nk-r-pill, 999px);
  color: var(--nk-ink, #0B1220);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* The last line: in the studio where the photo stays (on a page the field for the photo says it), the note on an AI
   overlay, and "Zgłoś problem". */
.nkm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.nkm-note { display: flex; align-items: center; gap: 8px; color: var(--nk-muted, #5D6372); font-size: 14px; }
.nkm-note svg, .nkm-help svg { flex: 0 0 auto; }
.nkm-help { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--nk-muted, #5D6372); font-size: 14px; }

@media (hover: hover) {
  .nkm-tab:hover .nkm-tab__art, .nkm-pick:hover .nkm-pick__art { box-shadow: 0 0 0 1px var(--nk-ink, #0B1220); }
  .nkm-tab[aria-selected="true"]:hover .nkm-tab__art, .nkm-tab[aria-pressed="true"]:hover .nkm-tab__art, .nkm-pick[aria-pressed="true"]:hover .nkm-pick__art { box-shadow: 0 0 0 2px var(--nk-surface, #FFFFFF), 0 0 0 4px var(--nk-ink, #0B1220); }
  .nkm-pill:hover { border-color: var(--nk-ink, #0B1220); }
  .nkm-ai__btn:hover, .nkm-done__copy:hover, .nkm-all:hover, .nkm-more__sum:hover { color: var(--nk-link-hover, #1C5F99); }
  .nkm-ai__btn:hover { border-color: var(--nk-link-hover, #1C5F99); }
  .nkm-download:not(:disabled):hover, .nkm-done__save:hover { background: var(--nk-dark-2, #1B2333); }
  .nkm-done--saved .nkm-done__save:hover { border-color: var(--nk-ink, #0B1220); background: var(--nk-surface-2, #EFEDE7); }
  .nkm-drop:hover { border-style: solid; }
  .nkm-drop:hover .nkm-drop__icon { background: var(--nk-dark-2, #1B2333); }
  .nkm-get--cards .nkm-check:hover { border-color: var(--nk-ink, #0B1220); }
}

/* Motion (the tokens of nk-tokens.css, the keyframes nk-in and nk-fade of app.css; motion.js cross-fades the canvases):
   the controls change colour, edge and shadow smoothly, the thumbnails of the overlays and the formats rise 1 px under
   the pointer, what appears comes in (the list of the saved files one file after another, 60 ms apart). With less
   motion the tokens give 0 and 100 ms without the rise, and the rule below stops it all. "Więcej opcji" opens with the
   height animation of every <details> in app.css: no height or overflow of its own here. */
.nkm-pick__art, .nkm-tab__art, .nkm-check, .nkm-pill, .nkm-add, .nkm-drop, .nkm-stage, .nkm-change, .nkm-all, .nkm-download, .nkm-ai__btn, .nkm-done__save, .nkm-help {
  transition: background-color var(--nk-motion-fast, 150ms) var(--nk-ease, ease), border-color var(--nk-motion-fast, 150ms) var(--nk-ease, ease), color var(--nk-motion-fast, 150ms) var(--nk-ease, ease), box-shadow var(--nk-motion-fast, 150ms) var(--nk-ease, ease), translate var(--nk-motion-fast, 150ms) var(--nk-ease, ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nkm-pick:hover .nkm-pick__art, .nkm-tab:hover .nkm-tab__art { translate: 0 -1px; }
}
.nkm-done:not([hidden]), .nkm-done__item, .nkm-notice:not([hidden]) { animation: nk-in var(--nk-motion, 260ms) var(--nk-ease, ease) backwards; }
.nkm-done__item:nth-child(3) { animation-delay: 60ms; }
.nkm-done__item:nth-child(4) { animation-delay: 120ms; }
.nkm-done__item:nth-child(5) { animation-delay: 180ms; }
.nkm-change:not([hidden]), .nkm-tools:not([hidden]) { animation: nk-fade var(--nk-motion, 260ms) var(--nk-ease, ease) backwards; }

/* Narrow phones (360 px and less): the overlays and the formats a little tighter, the labels of "Więcej opcji" over
   their pills. */
@media (max-width: 360px) {
  .nkm-picks__list { gap: 4px 6px; }
  .nkm-tabs, .nkm-checks { gap: 0 4px; }
  .nkm-get--cards .nkm-checks { gap: 4px; }
  .nkm-row__label { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nkp *, .nkp *::before, .nkp *::after, .nkm *, .nkm *::before, .nkm *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .nkm-pill[aria-pressed="true"] { border-color: Highlight; outline: 2px solid Highlight; outline-offset: 1px; }
  .nkm-tab[aria-selected="true"] .nkm-tab__art, .nkm-tab[aria-pressed="true"] .nkm-tab__art, .nkm-pick[aria-pressed="true"] .nkm-pick__art { outline: 3px solid Highlight; outline-offset: 2px; }
  .nkm-download, .nkm-done__save, .nkm-ai__btn, .nkm-add__icon, .nkm-sample { border: 1px solid ButtonText; }
  .nkm-download:disabled { border-color: GrayText; }
  .nkm-more, .nkm-ai { border-color: CanvasText; }
  .nkm-drop { border-color: CanvasText; }
  .nkm-drop__icon, .nkm-pick__tick { border: 1px solid ButtonText; }
  .nkm-get--cards .nkm-check.is-on, .nkm-get--cards .nkm-check:has(.nkm-check__box:checked) { outline: 2px solid Highlight; outline-offset: 1px; }
}