/* Klocki: przyciski, karty, listy, formularz, przełączniki. Każdy klocek = jeden szablon w templates/components/
   (albo powtarzalny fragment strony) i jedna sekcja tutaj. */

/* Znak „DM” */
.mark {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--color-ink);
  display: grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: .06em;
}
.mark-large { width: 68px; height: 68px; font-size: 19px; margin: 0 auto 30px; }

/* Przyciski */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: var(--radius-pill); border: 0; cursor: pointer;
  background: var(--color-ink); color: var(--color-on-ink);
  font: inherit; font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none;
  transition: opacity .2s;
}
.button:hover { opacity: .86; }
.button:disabled, .button[aria-disabled="true"] { opacity: .5; cursor: default; }
.button-quiet { background: transparent; color: var(--color-ink); border: 1px solid var(--color-line); }
.icon-button {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--color-line); background: transparent; color: var(--color-ink); cursor: pointer;
}
.icon-button svg { width: 18px; height: 18px; }

/* Media społecznościowe */
.socials { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.socials li { margin: 0; }
.socials a {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--color-line); transition: background .2s, border-color .2s, transform .2s;
}
.socials a:hover { background: var(--color-surface); border-color: var(--color-focus); transform: translateY(-2px); }
.socials svg { width: 19px; height: 19px; fill: currentColor; }
.socials-small a { width: 40px; height: 40px; }
.socials-small svg { width: 16px; height: 16px; }

/* Karty aplikacji */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); padding: 0; margin: 0; list-style: none; }
.app-card {
  display: flex; flex-direction: column; gap: var(--space-3); height: 100%;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card);
  padding: var(--space-4); text-decoration: none;
}
.app-card:hover { border-color: var(--color-focus); }
.app-card .app-name { font-weight: 600; font-size: 18px; }
.app-card .app-tagline { color: var(--color-muted); font-size: 15px; margin: 0; }
.app-icon { width: 64px; height: 64px; border-radius: 15px; border: 1px solid var(--color-line); }
.app-icon-large { width: 96px; height: 96px; border-radius: 22px; }
.badge {
  align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); color: var(--color-muted);
}
.app-header { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.app-header h1 { margin: 0; }
.app-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); }

/* Treść dokumentów i wpisów (Markdown) */
.prose h2 { font-size: 20px; margin: var(--space-5) 0 var(--space-2); }
.prose a:not(.button) { text-decoration-thickness: 1px; }
.prose .button { margin-top: var(--space-2); }
.summary {
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 18px;
  padding: var(--space-4) 22px; margin: var(--space-4) 0 var(--space-2);
}
.summary p:last-child { margin-bottom: 0; }

/* Lista wpisów */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-row { display: flex; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-top: 1px solid var(--color-line); margin: 0; }
.post-row:first-child { border-top: 0; }
.post-row time { flex: 0 0 104px; color: var(--color-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.post-row a { text-decoration: none; font-weight: 600; }
.post-row a:hover { text-decoration: underline; }
.post-row .post-language { margin-left: auto; font-size: 12px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em; }

/* Wybór (filtry, języki) */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.chips li { margin: 0; }
.chips a {
  display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-line);
  text-decoration: none; font-size: 14px; color: var(--color-muted);
}
.chips a[aria-current="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-ink); }
/* Język strony: ikona zawsze w menu; lista wersji po kliknięciu (jedna wersja — ikona nieaktywna). */
.language-menu { position: relative; }
.language-menu summary { list-style: none; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu ul {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 10; min-width: 140px;
  list-style: none; margin: 0; padding: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 14px;
}
.language-menu li { margin: 0; }
.language-menu a { display: block; padding: 8px 12px; border-radius: 10px; text-decoration: none; font-size: 15px; }
.language-menu a:hover { background: var(--color-field); }
.language-menu a[aria-current="true"] { font-weight: 600; }
.language-single { color: var(--color-muted); opacity: .45; cursor: default; }

/* Przełącznik motywu: ikona aktualnego wyboru (system / jasny / ciemny) */
.theme-toggle [data-icon] { display: none; }
.theme-toggle[data-choice="system"] [data-icon="system"],
.theme-toggle[data-choice="light"] [data-icon="light"],
.theme-toggle[data-choice="dark"] [data-icon="dark"] { display: block; }

/* Formularz */
.form { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 26px; display: grid; gap: var(--space-4); }
.form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.form input, .form textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--color-ink); background: var(--color-field);
  border: 1px solid transparent; border-radius: var(--radius-field); padding: 13px 15px; outline: none; transition: border-color .2s;
}
.form input:focus, .form textarea:focus { border-color: var(--color-focus); }
.form textarea { resize: vertical; min-height: 170px; }
.form .field-error { color: var(--color-error); font-size: 14px; margin: 6px 0 0; }
.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-status { color: var(--color-muted); font-size: 15px; margin: 0; }
.form-status.error { color: var(--color-error); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.note { color: var(--color-muted); font-size: 13px; line-height: 1.55; margin: var(--space-4) 4px 0; }
.sent { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 30px; }
.sent h2 { margin: 0 0 6px; }
.sent p { margin: 0; color: var(--color-muted); }

/* htmx: przycisk w trakcie wysyłki */
.htmx-request .button[type="submit"] { opacity: .5; }