/* Styl „paper”: przestronny dokument do druku. Krój szeryfowy, pola jako podkreślenia, sekcje zawsze otwarte
   z tytułem kapitalikami między liniami, karty jako akapity numerowane rzymsko, ikony słowne (⌃ ⌄ „usuń”), pasek
   zapisu jako linia na końcu, kręciołek jako pulsująca kropla atramentu, styl do druku.
   Włączenie: data-thw-style="paper" na `<html>` albo nad formularzem (nazwy stylów: themewright, formwright#56). */

/* Zmienne na samym elemencie ze stylem: kroje i odstępy (`--sf-*`) – formularz. Kształt (`--thw-radius*`, `--thw-shadow`)
   daje themewright (`themes/styles.css`, themewright#15), kolory – motyw themewright (styl ich nie zmienia); styl
   przełącza się w locie zmianą atrybutu. */
:where([data-thw-style="paper"]) {
  --sf-font: "C059", "Century Schoolbook", Georgia, serif;
  --sf-font-display: "P052", "Palatino Linotype", Palatino, serif;
  --sf-font-size: 15px;
  --sf-radius-pill: 0; --sf-gap: 26px;
  --sf-duration: .4s;
}
/* Bez pierścienia fokusu (pola mają podkreślenie) – na formularzu i oknie, tam gdzie domyślny; poza klockiem (rama, inne
   klocki) zmiennej nie ma, więc ich własny znak fokusu zostaje. */
:where([data-thw-style="paper"]) :is(.sf-form, .sf-dialog, .sf-ui) { --sf-ring: none; }
:where([data-thw-style="paper"]) .sf-form { --thw-surface: transparent; }  /* jedyny wyjątek od „styl nie zmienia kolorów”: pola
   formularza jak na papierze, bez własnego tła (okno wyboru stoi obok formularza i ma tło motywu) */

:where([data-thw-style="paper"]) {
  & .sf-input, & .sf-tags { border-width: 0 0 1px; border-radius: 0; padding-right: 0; padding-left: 0; }
  & .sf-input:focus, & .sf-tags:focus-within, & .sf-affixed:focus-within { border-bottom-color: var(--thw-tone-accent); box-shadow: 0 1px 0 var(--thw-tone-accent); }
  & select.sf-input { padding-right: 22px; }
  & .sf-label, & .sf-read-label { font-size: 13px; font-style: italic; font-weight: 400; letter-spacing: 0; }
  /* Sekcje otwarte (::details-content), tytuł kapitalikami między liniami, bez klikania; sekcja z `collapsed`
     (`.sf-collapsible`) zwija się po kliknięciu tytułu, a zwinięta ma linie przerywane (formwright#105). */
  & details.sf-section:not(.sf-collapsible)::details-content { content-visibility: visible; display: contents; }
  & .sf-section-title { justify-content: center; gap: 14px; padding: 0; border: 0; pointer-events: none;
    font: 400 15px var(--sf-font-display); font-variant: small-caps; letter-spacing: .14em; text-transform: lowercase; }
  & .sf-section-title::before, & .sf-section-title::after, & details.sf-section > .sf-section-title::after { content: ""; flex: 1; width: auto; height: 0; margin: 0;
    border: 0; border-top: 1px solid var(--thw-line); transform: none; }
  & .sf-section-title .sf-badge, & .sf-collapsible > .sf-section-title { pointer-events: auto; }
  & .sf-collapsible:not([open]) > .sf-section-title::before, & .sf-collapsible:not([open]) > .sf-section-title::after { border-top-style: dashed; }
  & .sf-section-body { padding-top: 22px; }
  /* Karty jako akapity z numerami rzymskimi. */
  & .sf-cards { counter-reset: card; gap: 22px; }
  & .sf-card { counter-increment: card; border: 0; border-top: 1px solid var(--thw-line); border-radius: 0; background: none; }
  & .sf-card-head { padding: 6px 0; border: 0; }
  & .sf-card-number { min-width: 2.5em; background: none; color: var(--thw-tone-accent); font-size: 0; }
  & .sf-card-number::before { content: counter(card, upper-roman) "."; font: 600 15px var(--sf-font-display); }
  & .sf-card-body { padding: 4px 0 0 2.5em; }
  & .sf-cards.sf-read .sf-card { border-left: 0; padding-left: 0; }
  /* Ikony słowne. */
  & .sf-icon[data-icon="up"]::before { content: "⌃"; }
  & .sf-icon[data-icon="down"]::before { content: "⌄"; }
  & .sf-icon[data-icon="remove"]::before { content: "usuń"; font: italic 12px var(--sf-font); }
  & .sf-icon[data-icon="clear"]::before, & .sf-icon[data-icon="close"]::before { content: "✕"; font-size: 13px; }
  & .sf-icon-button { width: auto; min-width: 26px; padding: 0 4px; }
  & .sf-add-wide { padding-left: 0; border: 0; border-bottom: 1px dotted var(--thw-muted); background: none; font-style: italic; font-weight: 400; text-align: left; }
  & .sf-button { font-weight: 400; }
  & .sf-table thead th { border-bottom: 1px solid var(--thw-ink); font-style: italic; font-weight: 400; }
  & .sf-table td { border-bottom-style: dotted; }
  & .sf-tag, & .sf-chip { border-bottom: 1px solid var(--thw-line); background: none; box-shadow: none; }
  & :is(.sf-locales, .sf-segmented) { border-width: 0 0 1px; background: none; }
  & :is(.sf-locale.current, .sf-segment:has(input:checked)) { background: none; color: var(--thw-tone-accent); box-shadow: inset 0 -2px 0 var(--thw-tone-accent); }
  & .sf-form > .sf-actions { position: static; padding: 12px 0 0; border: 0; border-top: 1px solid var(--thw-ink); background: none; box-shadow: none; backdrop-filter: none; }
  & .sf-save { font-variant: small-caps; letter-spacing: .1em; }
  & .sf-reset { border: 0; background: none; font-style: italic; }
  & .sf-spinner { width: 8px; height: 8px; border: 0; background: var(--thw-tone-accent); animation: paper-ink 1.6s ease-in-out infinite; }
  /* Tabela słownika (`inline`): pola mają odstęp od krawędzi komórki jak nagłówek kolumny (motyw zeruje go polom). */
  & .sf-map-inline .sf-map-row .sf-input { padding-inline: 8px; }
  & .sf-map-inline .sf-map-row select.sf-input { padding-right: 22px; }
  /* Tony: motyw nadpisuje tu karty, pola albo tabelę, więc ton ma własne reguły (odcień z --thw-tone-<ton>, grubość --thw-tone-bar). */
  & :is(.sf-cards, .sf-cards.sf-read, .sf-map) .sf-card.sf-tone { padding-left: 10px; border-left: var(--thw-tone-bar) solid var(--sf-tone); background: var(--sf-tone-soft); }
  & .sf-field.sf-tone > .sf-input, & .sf-field.sf-tone > .sf-stack > .sf-input { padding-left: 6px; border-left-width: var(--thw-tone-bar); border-left-color: var(--sf-tone); }
  & .sf-table th.sf-tone { border-bottom-color: var(--sf-tone); }
}
@keyframes paper-ink { 50% { opacity: .2; scale: 1.6; } }
@media print {
  :where([data-thw-style="paper"]) :is(.sf-actions, .sf-toolbar, .sf-item-actions, .sf-add, .sf-table-add) { display: none !important; }
}