/* ============================================================================ 9-telefon/6-pulpit-harmonogram-ustawienia.css — TELEFON: PULPIT, HARMONOGRAM, USTAWIENIA, LOGOWANIE ---------------------------------------------------------------------------- Część domu telefonu (K18, v14, 26.09.2026) — zasady i kolejność plików: 9-telefon/1-podstawa.css. Działa wyłącznie przy :root[data-ui="mobile"]. ============================================================================ */ /* ============================ 1. PULPIT =================================== */ /* Markup: public/js/widoki/pulpit.js. Pojemnik .main-grid miał własny margines — kafle stały 30 px od krawędzi zamiast 16. Zakładki Przegląd / Prezentacje jako segment; kafle: podpis, liczba, opis; panele jako białe grupy. */ :root[data-ui="mobile"] #content .main-grid.dash-grid { gap: 12px; padding: 0; } :root[data-ui="mobile"] .dash-tabs { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 0; margin: 0; padding: 3px; border: 0; border-radius: var(--r); background: color-mix(in srgb, var(--text) 8%, var(--tlo-telefonu)); } :root[data-ui="mobile"] .dash-tab { min-height: var(--h-control); margin: 0; padding: 0 8px; border: 0; border-radius: var(--r-sm); background: transparent; box-shadow: none; color: var(--text-muted); font-size: var(--t-base); font-weight: 600; } :root[data-ui="mobile"] .dash-tab.active { border: 0; background: var(--surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); } :root[data-ui="mobile"] .dash-tab::after { content: none; display: none; } /* 23.10.2026 (przegląd telefonu): na iPhonie SE (375 px) cztery zakładki Raportów łamały „Skuteczność ofert” na dwa wiersze i pasek rósł nierówno. Zakładki równej szerokości, gdy się mieszczą; gdy nie — według treści, w jednym wierszu, przewijane palcem (jak zakładki Timeline). */ :root[data-ui="mobile"] .dash-tabs { grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } :root[data-ui="mobile"] .dash-tabs::-webkit-scrollbar { display: none; } :root[data-ui="mobile"] .dash-tab { white-space: nowrap; } /* Kafle KPI. Skan 13.09: kwota 32 px łamała „EUR" do drugiej linii, kafel miał ~240 px, a 10 kafli zajmowało trzy ekrany przed wykresami — ciaśniejsze kafle, mniej przewijania. Tura 4 (26.09): kwota ucinana wielokropkiem („344 506,20 E…”) — czcionka dopasowuje się do szerokości ekranu, a gdy liczba i tak się nie zmieści, waluta schodzi do drugiej linii. */ :root[data-ui="mobile"] .dash-cards { gap: 10px; } :root[data-ui="mobile"] .dash-card { gap: 2px; min-height: 0; padding: 12px 14px; border-radius: var(--grupa-r); } :root[data-ui="mobile"] .dash-card-label { color: var(--text-muted); font-size: var(--t-xs); font-weight: 500; } :root[data-ui="mobile"] .dash-card-value { overflow: visible; font-size: clamp(var(--t-md), 4.3vw, var(--t-xl)); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; text-overflow: clip; white-space: normal; } :root[data-ui="mobile"] .dash-card-sub { color: var(--text-muted); font-size: var(--t-xs); line-height: 1.35; } :root[data-ui="mobile"] .dash-panels { gap: 12px; } :root[data-ui="mobile"] .dash-panel { padding: 14px 16px; } :root[data-ui="mobile"] .dash-panel h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--text); font-size: var(--t-md); font-weight: 600; } /* Kropka „wymaga reakcji” wisi w lewym marginesie tytułu (jak wypunktowanie), a tytuł i dopisek dzielą to samo wcięcie: gdy „po terminie: 1” nie mieści się obok tytułu (390 px), schodzi pod tytuł równo z jego pierwszą literą, a nie pod kropkę (W2/E1, 27.09). Szerzej (telefon poziomo) — wszystko w jednej linii. */ :root[data-ui="mobile"] .dash-panel-urgent > h3:first-of-type { position: relative; padding-left: calc(var(--s-2) * 2); } :root[data-ui="mobile"] .dash-panel-urgent > h3:first-of-type::before { position: absolute; left: 0; top: calc(.625em - var(--s-1)); margin-right: 0; } :root[data-ui="mobile"] .dash-hint { color: var(--text-muted); font-size: var(--t-xs); font-weight: 400; } /* „Najwięksi klienci" i „10 projektów…" miały 5–8 kolumn w 360 px (nazwy łamane na 3 linie, ostatnia kolumna ucięta). Wiersz: pierwsza komórka (klient / projekt) na całą szerokość, liczby pod nią w dwóch kolumnach z podpisami. */ :root[data-ui="mobile"] .dash-table-wrap { overflow: visible; padding: 0; background: transparent; } :root[data-ui="mobile"] .dash-table { display: block; width: 100%; min-width: 0; } :root[data-ui="mobile"] .dash-table thead { display: none; } :root[data-ui="mobile"] .dash-table tbody { display: block; } :root[data-ui="mobile"] .dash-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 0; border: 0; } :root[data-ui="mobile"] .dash-table tbody tr + tr { border-top: 1px solid var(--kreska-wlos); } :root[data-ui="mobile"] .dash-table tbody td { display: block; min-width: 0; padding: 0; border: 0; font-size: var(--t-base); font-variant-numeric: tabular-nums; text-align: left; white-space: normal; } :root[data-ui="mobile"] .dash-table tbody td::before { content: attr(data-label); display: block; overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } :root[data-ui="mobile"] .dash-table tbody td:first-child { grid-column: 1 / -1; font-size: var(--t-base); font-weight: 600; } :root[data-ui="mobile"] .dash-table tbody td:first-child::before { content: none; } :root[data-ui="mobile"] .dash-table tbody td:first-child:is(:empty, :has(> :only-child:empty)) { display: none; } /* „10 projektów…": pierwsza kolumna to miejsce (#) — idzie przed nazwę projektu, nazwa jest tytułem wiersza. */ :root[data-ui="mobile"] .dash-table tbody tr:has(> td:nth-child(8)) > td:first-child { grid-column: 1; color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; } :root[data-ui="mobile"] .dash-table tbody tr:has(> td:nth-child(8)) > td:nth-child(2) { grid-column: 2 / -1; font-size: var(--t-base); font-weight: 600; } :root[data-ui="mobile"] .dash-table tbody tr:has(> td:nth-child(8)) > td:nth-child(2)::before { content: none; } /* POPR-n38: Prezentacje na telefonie — karta: projekt na całą szerokość, pola z podpisem; strzałka rozwinięcia w rogu. */ :root[data-ui="mobile"] .dash-presentations-table-wrap { max-height: none; } :root[data-ui="mobile"] .dash-presentations-table tbody tr.dash-pres-row { position: relative; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-right: 28px; } :root[data-ui="mobile"] .dash-presentations-table tbody tr.dash-pres-row > td { grid-column: span 3; white-space: normal; } :root[data-ui="mobile"] .dash-presentations-table tbody tr.dash-pres-row > td.dash-pres-caret { position: absolute; top: 12px; right: 0; } :root[data-ui="mobile"] .dash-presentations-table tbody tr.dash-pres-row > td.dash-pres-projekt.dash-pres-projekt { grid-column: 1 / -1; } /* podwójna klasa: wygrywa z ogólną regułą kart tabel (td:nth-child(2) od 2. kolumny) */ :root[data-ui="mobile"] .dash-presentations-table tbody tr.dash-pres-row > td.dash-pres-projekt .dash-project-link { display: block; width: 100%; min-height: 44px; padding: 10px 0; text-align: left; } :root[data-ui="mobile"] .dash-presentations-table tbody tr.dash-pres-row > td[data-label="Klient"] { grid-column: span 8; } :root[data-ui="mobile"] .dash-presentations-table tbody tr.dash-pres-row > td:is([data-label="Wersja"], [data-label="Otwarcia"], [data-label="Ostatnio"], [data-label="Akceptacja"]) { grid-column: span 4; } /* ============================ 2. HARMONOGRAM (Timeline) =================== */ /* Timeline: sterowanie w dwóch równych rzędach — ‹ Dzisiaj › na całą szerokość, pod nim Tydzień|Miesiąc i Mój|Wszystko pół na pół. „Dziś: …" jako zwykły szary podpis (była zielona pigułka z ramką). Siatka dni przewija się w bok we własnym pasku — to zamierzone. */ :root[data-ui="mobile"] .timeline-toolbar { display: grid; gap: 8px; padding: 8px 0 4px; border: 0; background: transparent; } :root[data-ui="mobile"] .timeline-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } :root[data-ui="mobile"] .timeline-controls > .timeline-nav { grid-column: 1 / -1; display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; } :root[data-ui="mobile"] .timeline-controls > .segmented { width: 100%; } :root[data-ui="mobile"] .timeline-controls > .segmented > button { flex: 1 1 0; } :root[data-ui="mobile"] .timeline-controls > .timeline-nav > button { color: var(--text); } :root[data-ui="mobile"] .timeline-controls > :is(.timeline-range-switch:only-of-type, .timeline-scope-switch:last-of-type:nth-of-type(2)) { grid-column: auto; } :root[data-ui="mobile"] .timeline-today-chip { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 0; border: 0; background: transparent; color: var(--text-muted); font-size: var(--t-sm); font-weight: 500; } :root[data-ui="mobile"] .timeline-today-pip { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: none; } :root[data-ui="mobile"] .timeline-controls > .timeline-add { grid-column: 1 / -1; justify-content: center; } :root[data-ui="mobile"] .timeline-tabs { margin-bottom: 0; } /* Telefon poziomo (ten sam warunek co przy czacie — 4-projekty-zadania-czat.css): całe sterowanie w JEDNYM rzędzie obok szukajki — w dwóch kolumnach zajmowało 262 px z 270 px wysokości ekranu i osi nie było widać (ergonomia 26.09, E1). „Dziś: …” znika — dzisiejszy dzień i tak jest zaznaczony na osi. */ :root[data-ui="mobile"]:where([data-telefon-poziomo]) .timeline-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 6px 0 2px; } :root[data-ui="mobile"]:where([data-telefon-poziomo]) .timeline-toolbar > .timeline-search { flex: 1 1 0; min-width: 110px; max-width: none; height: 46px; min-height: 46px; } /* b56: pole 44 px (było 38) */ /* `width: auto` — pionowa reguła telefonu daje sterowaniu całą szerokość (siatka), a w poziomie pudełko miało 812 px przy 601 px treści: szukajka dostawała 110 px („Szukaj”), a za „Nowe zadanie” zostawał pusty pas. Teraz szukajka bierze całą resztę wiersza (~200 px; tura 3 E1, 27.09). */ :root[data-ui="mobile"]:where([data-telefon-poziomo]) .timeline-controls { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: 6px; width: auto; margin-left: 0; } :root[data-ui="mobile"]:where([data-telefon-poziomo]) .timeline-controls > * { flex: 0 0 auto; min-width: 0; } :root[data-ui="mobile"]:where([data-telefon-poziomo]) .timeline-controls > .timeline-nav { display: flex; } :root[data-ui="mobile"]:where([data-telefon-poziomo]) .timeline-controls > .segmented { width: auto; } :root[data-ui="mobile"]:where([data-telefon-poziomo]) .timeline-controls > .segmented > button { flex: 0 0 auto; padding: 0 10px; } :root[data-ui="mobile"]:where([data-telefon-poziomo]) .timeline-controls > .timeline-nav > button { min-width: 40px; } :root[data-ui="mobile"]:where([data-telefon-poziomo]) .timeline-controls > .timeline-add { flex: none; padding: 0 12px; } :root[data-ui="mobile"]:where([data-telefon-poziomo]) .timeline-today-chip { display: none; } /* Panel „Konsultacje": opis pod nagłówkiem schowany na telefonie (3 linie instrukcji nad każdą listą — tę samą treść ma pomoc „?"), karta projektu bez ramki w białej grupie (karta w karcie), pusty stan zwykłym tekstem. */ :root[data-ui="mobile"] .timeline-panel { padding: 0; border: 0; background: transparent; box-shadow: none; } :root[data-ui="mobile"] .timeline-panel-head { padding: 14px 4px 6px; border: 0; } :root[data-ui="mobile"] .timeline-panel-head h3 { color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; } :root[data-ui="mobile"] .consult-panel .timeline-panel-head p { display: none; } :root[data-ui="mobile"] .consult-grid { display: grid; gap: 10px; } :root[data-ui="mobile"] .consult-card { gap: 8px; padding: 14px 16px; border: 0; border-radius: var(--grupa-r); background: var(--surface); box-shadow: none; } /* Nagłówek karty na telefonie stoi w kolumnie (14-timeline.css), a tytuł ma `flex: 1 1 180px` z układu w wierszu — w kolumnie 180 px to WYSOKOŚĆ: pod nazwą klienta zostawała pusta dziura (karty „Projekty w konsultacji”, b54). W kolumnie tytuł ma swoją wysokość. */ :root[data-ui="mobile"] .consult-card-title { flex: 0 0 auto; } :root[data-ui="mobile"] .consult-card-title strong { color: var(--text-muted); font-size: var(--t-sm); font-weight: 500; } :root[data-ui="mobile"] .consult-card-name { font-size: var(--t-md); font-weight: 600; } :root[data-ui="mobile"] .consult-card .checklist-empty { padding: 4px 0; border: 0; background: transparent; color: var(--text-muted); font-size: var(--t-sm); text-align: left; } :root[data-ui="mobile"] .consult-add-btn { min-height: 40px; border: 0; background: var(--btn-2); } :root[data-ui="mobile"] .timeline-empty { padding: 20px 16px; border: 0; border-radius: var(--grupa-r); background: var(--surface); color: var(--text-muted); font-style: normal; } /* Harmonogram › Produkcja: w kolumnie nazw (126 px) przycisk „+” (rozwiń kroki planu) stał obok numeru i ucinał go do „P001…”. Na telefonie „+” schodzi pod numer i nazwę — numer ma całą szerokość kolumny (przegląd E1, 27.09). */ :root[data-ui="mobile"] .timeline-label-main:has(> .tree-toggle) { flex-direction: column; align-items: flex-start; gap: var(--s-1); } :root[data-ui="mobile"] .timeline-label-main:has(> .tree-toggle) > .timeline-label-text { order: -1; width: 100%; } :root[data-ui="mobile"] .consult-gantt-wrap { border: 0; border-radius: var(--grupa-r); box-shadow: none; } /* ============================ 3. USTAWIENIA =============================== */ /* Markup: public/js/widoki/ (panele-akordeony). Nagłówek panelu = wiersz: tytuł, pod nim zwykły szary opis (dziedziczył pogrubienie 800 z nagłówka), strzałka bez ramki. Tytuł strony „Ustawienia" nad listą powtarzał pasek górny — na telefonie zostaje sam opis pod nim. */ :root[data-ui="mobile"] .settings-header h2 { display: none; } :root[data-ui="mobile"] .settings-header p { margin: 0 4px 4px; color: var(--text-muted); font-size: var(--t-sm); } :root[data-ui="mobile"] .settings-layout { gap: 10px; } :root[data-ui="mobile"] .settings-panel > .panel-heading { flex-wrap: wrap; gap: 8px 10px; min-height: 60px; padding: 10px 14px 10px 16px; border-bottom: 1px solid transparent; font-weight: 400; } :root[data-ui="mobile"] .settings-panel:not(.is-collapsed) > .panel-heading { border-bottom-color: var(--kreska-wlos); } :root[data-ui="mobile"] .settings-panel > .panel-heading :is(h2, h3) { font-size: var(--t-md); font-weight: 600; } :root[data-ui="mobile"] .settings-panel > .panel-heading p { margin-top: 2px; color: var(--text-muted); font-size: var(--t-sm); font-weight: 400; line-height: 1.35; } :root[data-ui="mobile"] .settings-accordion-icon { width: 20px; height: 20px; border: 0; background: transparent; } :root[data-ui="mobile"] .settings-accordion-heading:hover { background: transparent; } :root[data-ui="mobile"] .settings-panel > .panel-heading .icon-button:not(.settings-accordion-icon) { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--btn-2); color: var(--accent); } :root[data-ui="mobile"] .settings-form-grid { grid-template-columns: minmax(0, 1fr); } /* ERG5-10: wiersz „etykieta … wartość" na telefonie — etykieta NAD wartością. Obok siebie napisy nachodziły („Następne sprawdzenie" pod datą, „Aktualizacja kursu" pod listą). */ :root[data-ui="mobile"] .settings-note { grid-template-columns: minmax(0, 1fr); gap: 6px; } :root[data-ui="mobile"] .settings-note strong { text-align: left; } :root[data-ui="mobile"] .settings-kurs-tryb { justify-content: flex-start; } :root[data-ui="mobile"] .settings-form-body { padding: 14px 16px 16px; } /* Ustawienia: przycisk w nagłówku panelu („+ Dodaj firmę") ściskał opis do wąskiej kolumny na 12 linii. Opis na całą szerokość, przycisk pod nim (jasnoniebieski — to akcja panelu, nie ekranu), strzałka zostaje w linii tytułu. */ :root[data-ui="mobile"] .settings-panel > .panel-heading > div { flex: 1 1 calc(100% - 40px); } :root[data-ui="mobile"] .settings-panel > .panel-heading > :is(.button, .ghost-button, .primary-button) { order: 5; min-height: 38px; margin: 0; } :root[data-ui="mobile"] .settings-panel > .panel-heading > .button.primary { background: var(--accent-soft); color: var(--accent-strong); } /* ============================ 4. LOGOWANIE ================================ */ /* Logowanie: formularz leży wprost na szarym tle — pola białe z włosową kreską, inaczej zlewały się z tłem. */ :root[data-ui="mobile"] .login-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { background-color: var(--surface); box-shadow: inset 0 0 0 1px var(--kreska-wlos); } /* === Lejek sprzedaży (F3, BŁĄD 27.09; v15 b17 PL2 — 1:1 ze wzorem) — telefon ================== Telefon poziomo i szerszy niż 600 px: rząd kolumn przewijany w bok jak na tablecie (4-widoki/26-lejek-sprzedazy.css), strona przewija się w pionie. Do 600 px: przełącznik pięciu etapów (liczba nad nazwą) i lista kart JEDNEGO etapu (.lejek[data-lejek-aktywny]). Cele dotyku 44 px (szukanie, ✕, „⋯”); pełne nazwy bez ucięcia. */ :root[data-ui="mobile"] .lejek { height: auto; margin-top: calc(var(--s-3) - var(--margines-roboczy-y)); margin-bottom: 0; overflow: visible; } :root[data-ui="mobile"] .lejek-szukaj { padding-right: 0; } :root[data-ui="mobile"] :is(.lejek-szukaj-czysc, .lejek-karta-menu) { width: var(--h-control); height: var(--h-control); } :root[data-ui="mobile"] .lejek-podsumowanie .lejek-szukaj input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { height: 100%; min-height: 0; padding: 1px 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: var(--t-sm); font-weight: var(--w-regular); } :root[data-ui="mobile"] .lejek-karta-nazwa { display: block; overflow: visible; -webkit-line-clamp: unset; } :root[data-ui="mobile"] .lejek-karta-klient { overflow: visible; white-space: normal; } :root[data-ui="mobile"] :is(.lejek-karta-glowa, .lejek-wszystkie) { min-height: var(--h-control); } :root[data-ui="mobile"] .lejek-znak { height: 26px; } :root[data-ui="mobile"][data-telefon-poziomo] .lejek-kolumny { align-items: flex-start; } :root[data-ui="mobile"][data-telefon-poziomo] .lejek-karty { overflow: visible; } @media (max-width: 600px) { :root[data-ui="mobile"] .lejek { gap: var(--s-2); } :root[data-ui="mobile"] .lejek-podsumowanie { gap: var(--s-1) var(--s-4); } :root[data-ui="mobile"] .lejek-podsumowanie > span { white-space: normal; } :root[data-ui="mobile"] .lejek-szukaj { flex: 1 1 100%; min-width: 0; } :root[data-ui="mobile"] :is(.lejek-rada--tablet, .lejek-rada--komputer) { display: none; } :root[data-ui="mobile"] .lejek-rada--telefon { display: block; } :root[data-ui="mobile"] .lejek-zakladki { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: var(--r); background: var(--surface-3); } :root[data-ui="mobile"] .lejek-zakladka { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: var(--h-control); padding: var(--s-1) 2px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); line-height: 1.2; } :root[data-ui="mobile"] .lejek-zakladka b { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text); font-size: var(--t-base); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; } :root[data-ui="mobile"] .lejek-zakladka b::before { content: ""; width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); background: var(--ton); } :root[data-ui="mobile"] .lejek-zakladka span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-ui="mobile"] .lejek-zakladka[aria-selected="true"] { background: var(--surface); box-shadow: var(--cien-1); color: var(--text); } :root[data-ui="mobile"] .lejek-kolumny { display: block; overflow: visible; padding: 0; } :root[data-ui="mobile"] .lejek-kolumna { display: none; border: 0; background: transparent; } :root[data-ui="mobile"] :is(.lejek[data-lejek-aktywny="kontakt"] [data-lejek-kolumna="kontakt"], .lejek[data-lejek-aktywny="oferta"] [data-lejek-kolumna="oferta"], .lejek[data-lejek-aktywny="negocjacje"] [data-lejek-kolumna="negocjacje"], .lejek[data-lejek-aktywny="sprzedane"] [data-lejek-kolumna="sprzedane"], .lejek[data-lejek-aktywny="przegrane"] [data-lejek-kolumna="przegrane"]) { display: flex; } :root[data-ui="mobile"] .lejek-kolumna-glowa { flex-flow: row wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding: var(--s-1) var(--s-1) var(--s-2); border: 0; } :root[data-ui="mobile"] .lejek-kolumna-glowa h3 { display: none; } :root[data-ui="mobile"] .lejek-karty { overflow: visible; padding: 0; } :root[data-ui="mobile"] .lejek-kolumna-stopka { padding: var(--s-2) 0 0; border: 0; } } /* Przełącznik w Ustawieniach na telefonie: ogólna reguła dla pól wyboru (20×20 px) zgniatała „suwak” do kwadratu — kółko wychodziło poza tor. Wiersz z przełącznikiem zachowuje wymiary z komputera (tor jak w 23-ustawienia.css). Wyłapane przy oknie Poczta, 24.10.2026. */ :root[data-ui="mobile"] .settings-switch-row input[type="checkbox"] { width: calc(var(--s-6) + var(--s-1)); height: var(--s-5); }