/* Styl „dark-square”: kanciasty, krój maszynowy w nagłówkach, sekcje jako belki z +/−, karty jako paski
   w kolorze akcentu (wjeżdżają z boku), pasek zapisu przyklejony do dołu okna, kręciołek jako schodkowy kwadrat.
   Kolory i tryb (np. ciemny) daje motyw themewright i `color-scheme` strony. Włączenie: data-thw-style="dark-square" 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="dark-square"]) {
  --sf-font: "Nimbus Sans", "Helvetica Neue", Arial, sans-serif;
  --sf-font-display: "Nimbus Mono PS", "DejaVu Sans Mono", ui-monospace, monospace;
  --sf-font-mono: "DejaVu Sans Mono", ui-monospace, monospace;
  --sf-radius-pill: 0; --sf-radius-round: 0;
  --sf-gap: 16px; --sf-duration: 0s;
}
/* Pierścień fokusu na formularzu i oknie (tam domyślny liczy się z akcentu): tylko w klocku, nie w ramie aplikacji. */
:where([data-thw-style="dark-square"]) :is(.sf-form, .sf-dialog, .sf-ui) { --sf-ring: 0 0 0 2px var(--thw-tone-accent); }

:where([data-thw-style="dark-square"]) {
  & .sf-section-title { padding: 8px 12px; border: 0; border-left: 4px solid var(--thw-tone-accent); background: var(--thw-menu);
    font: 700 12px var(--sf-font-display); letter-spacing: .12em; }
  & details.sf-section > .sf-section-title::after { content: "−"; width: auto; height: auto; border: 0; transform: none; color: var(--thw-tone-accent); font-size: 16px; }
  & details.sf-section:not([open]) > .sf-section-title::after { content: "+"; transform: none; }
  & .sf-section-body { padding: 14px 0 0 16px; }
  & .sf-input, & .sf-tags { border-width: 0 0 2px; background-color: var(--thw-surface); }
  & .sf-input:focus, & .sf-tags:focus-within, & .sf-affixed:focus-within { border-color: var(--thw-tone-accent); box-shadow: none; }
  & .sf-label, & .sf-read-label { font: 400 11px var(--sf-font-display); text-transform: uppercase; letter-spacing: .08em; }
  & .sf-card { border: 0; border-left: 3px solid var(--thw-tone-accent); background: var(--thw-surface); }
  & [data-sf-fresh] { animation: ds-in .25s ease-out; }
  & .sf-card-head { border-bottom: 0; background: var(--thw-menu); }
  & .sf-card-number { background: var(--thw-tone-accent); color: var(--thw-accent-ink); font-family: var(--sf-font-display); }
  & .sf-cards.sf-read .sf-card { border-left-color: var(--thw-line); }
  & .sf-add-wide { border-style: solid; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
  & .sf-table thead th { border-bottom-color: var(--thw-tone-accent); font: 400 11px var(--sf-font-display); text-transform: uppercase; }
  & .sf-table tbody tr:hover td { background: var(--thw-menu); }
  & .sf-form > .sf-actions { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 24px; border-width: 1px 0 0; background: var(--thw-page); backdrop-filter: none; }
  & .sf-save { letter-spacing: .1em; text-transform: uppercase; }
  & .sf-status[data-state="saved"] { animation: ds-flash .6s steps(2) 2; }
  & .sf-spinner { width: 10px; height: 10px; border: 0; background: var(--thw-tone-accent); animation: ds-spin .8s steps(4) infinite; }
  & .sf-icon[data-icon="remove"]::before, & .sf-icon[data-icon="clear"]::before, & .sf-icon[data-icon="close"]::before { content: "✕"; }
  /* 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 { border-left-color: var(--sf-tone); background: var(--sf-tone-soft); }
  & .sf-field.sf-tone > .sf-input, & .sf-field.sf-tone > .sf-stack > .sf-input { 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 ds-in { from { opacity: 0; translate: -12px 0; } }
@keyframes ds-spin { to { rotate: 360deg; scale: .4; } }
@keyframes ds-flash { 50% { color: var(--thw-tone-accent); } }
@media (prefers-reduced-motion: reduce) { :where([data-thw-style="dark-square"]) :is([data-sf-fresh], .sf-spinner, .sf-status) { animation: none !important; } }