/* dar.kolegium.org — the admin's density layer (SESSION-11B §3). Loaded after app.css, and only by the admin shell, the admin sign-in and the invitation screen. It redefines size tokens the components already read — sizes, spacings and font sizes only; no colours, radii or shadows (CLAUDE.md 9). Everything sits under (pointer: fine): the same admin opened on a phone keeps today's 44 px targets, and the public part never loads this file (CLAUDE.md 12 as amended in docs/DECISIONS.md, S11B). The numbers are the ones Linear, ClickUp, Stripe Dashboard, Polaris (compact) and GitHub converge on. Admin redizajn (28. 9. 2026, D1): 13 px UI text, 28 px controls (24 px small), 40 px table rows, ≥ 24 × 24 px targets (WCAG 2.2 AA, 2.5.8), visible focus everywhere. */ @media (pointer: fine) { .kan-admin, .kan-admin-signin { /* Type: 13 px UI body, 12 px meta, 11 px overlines and table headers. */ --fs-body: 0.8125rem; --fs-body-sm: 0.8125rem; --fs-small: 0.8125rem; --fs-legal: 0.75rem; --fs-overline: 0.6875rem; --fs-h4: 0.875rem; --lh-body: 1.5; /* Controls (D1): 28 px, small 24 px; the one lg — the sign-in CTA — is 40 px. --touch-min carries every "hit padding" in the admin: 28 px visual, never below the 24 px the amended rule 12 asks for. */ --touch-min: 28px; --control-h-sm: 24px; --control-h: 28px; --control-h-lg: 40px; --field-gap: 12px; --admin-field-gap: 12px; /* Shell (admin redizajn P1: Sidebar.dc.html — 232 px sidebar, 30 px items, 48 px top bar) */ --admin-side-w: 232px; --admin-nav-h: 30px; --admin-nav-fs: 0.8125rem; --admin-topbar-h: 48px; --admin-main-pad: var(--space-5) var(--space-8) var(--space-8); --admin-stack: var(--space-5); --admin-h1: 28px; --admin-overline-fs: 0.6875rem; /* Cards, tiles, tables, dialogs */ --admin-card-pad: var(--space-4); --admin-card-gap: var(--space-4); --admin-stat-value: 24px; --admin-cell-py: 6px; --admin-cell-px: var(--space-3); --admin-row-h: 40px; --admin-head-h: 32px; --admin-card-head-h: 44px; --admin-modal-pad: var(--space-4); --admin-modal-gap: var(--space-3); --admin-modal-title: 20px; --admin-dialog-pad: var(--space-4); /* Sign-in and invitation */ --admin-signin-pad: var(--space-6); --admin-signin-gap: var(--space-4); --admin-signin-h1: 24px; --admin-signin-logo-w: 160px; } /* --- Shell ------------------------------------------------------------- */ .kan-admin__header { align-items: center; } .kan-admin__h1 { line-height: 1.2; } .kan-admin-h2 { font-size: 0.9375rem; } .kan-admin-section { gap: var(--space-2); } .kan-admin-toolbar { gap: var(--space-3); } .kan-inline-link { min-height: 24px; } .kan-search .kan-btn--sm { min-height: var(--control-h); } /* --- Alerts, empty states, notes ---------------------------------------- */ .kan-admin .kan-alert { padding: var(--space-3) var(--space-4); gap: var(--space-2); } .kan-admin .kan-alert__icon .kan-icon { width: 16px; height: 16px; } .kan-admin .kan-result-note { line-height: 1.5; } .kan-admin .kan-result-actions { gap: var(--space-2); } /* --- Buttons and small controls ----------------------------------------- */ .kan-admin .kan-btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-2); font-size: 0.75rem; } .kan-admin .kan-btn--md { padding: 0 10px; } .kan-admin .kan-btn .kan-icon { width: 14px; height: 14px; } /* 16 px boxes (Komponenty.dc.html); the label beside them keeps the row >= 28 px. */ .kan-admin .kan-checkbox__box, .kan-admin .kan-checkbox__input { width: 16px; height: 16px; } .kan-admin .kan-checkbox__glyph .kan-icon { width: 12px; height: 12px; } .kan-admin .kan-freq__option { min-height: var(--control-h-sm); font-size: 0.75rem; } .kan-admin .kan-freq--icons .kan-freq__option { min-width: 28px; min-height: var(--control-h-sm); } .kan-admin .kan-tabs__tab { min-height: 36px; } .kan-admin .kan-checkbox { padding-block: 2px; } .kan-admin .kan-editor__btn, .kan-admin .kan-lang-tabs__tab, .kan-admin .kan-rules__summary { min-height: 32px; } .kan-admin .kan-photos__actions .kan-iconbtn { height: 28px; } .kan-admin .kan-textarea { min-height: 96px; padding: var(--space-2) var(--space-3); } /* --- Badges: 20 px, 12 px text (D17) ------------------------------------- */ .kan-admin .kan-badge { padding: 2px var(--space-2); gap: 4px; font-size: 0.75rem; line-height: 1.3; } .kan-admin .kan-badge .kan-icon { width: 12px; height: 12px; } /* --- Tables: 40 px rows (D1), one line each, sticky header, numbers right -- */ .kan-admin .kan-table-wrap { max-height: calc(100vh - 12rem); overflow: auto; } .kan-admin .kan-table thead th { position: sticky; top: 0; z-index: 1; font-size: 0.75rem; letter-spacing: normal; } .kan-admin .kan-table td { height: 40px; max-width: 28rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* SESSION-11N §1.2 fix · beats the rule right above it (same specificity + a class more): the zbierka detail's narrow „Ročník" column must not stretch to the same 28rem ceiling as every other cell. */ .kan-admin .kan-table td.kan-table__vintage-narrow { max-width: none; } .kan-admin .kan-table__head, .kan-admin .kan-table__sort, .kan-admin .kan-table__muted { min-height: 24px; } /* A 40 px row holds a 24 px control with room to spare; 24 is the floor, not less. */ .kan-admin .kan-table td .kan-btn--sm { min-height: 24px; padding-inline: var(--space-2); } /* The secondary line joins the first: never a second line in a row. */ .kan-admin .kan-table__sub { display: inline; margin-left: var(--space-2); } .kan-admin .kan-status-cell { flex-direction: row; align-items: center; gap: var(--space-2); } .kan-admin .kan-table__review td { height: auto; white-space: normal; overflow: visible; } .kan-admin .kan-review { padding: var(--space-1) 0 var(--space-2); } /* Row actions are quiet text until the row is hovered or the link is focused; the link is always in the DOM and always readable — quiet, not hidden. */ .kan-admin .kan-table__actions .kan-btn--link { color: var(--text-muted); } .kan-admin .kan-table tbody tr:hover .kan-btn--link, .kan-admin .kan-table .kan-btn--link:focus-visible { color: var(--text-link); } .kan-admin .kan-table tbody tr:hover td { background: var(--surface-sunken); } .kan-admin .kan-table__review td, .kan-admin .kan-table tbody tr:hover .kan-table__review td { background: var(--warning-surface); } /* --- S11F: the foundations at desk density -------------------------------- */ /* A row action is 28 px here (--control-h) and 44 px on a coarse pointer, where --touch-min carries it. The „i" is a 24 px circle with a 28 px target under it (its ::after), which is the floor the amended rule 12 asks for. */ .kan-admin .kan-table__actions .kan-iconbtn, .kan-admin .kan-table__actions--icons .kan-iconbtn, .kan-admin .kan-status-cell__flag .kan-iconbtn { width: var(--control-h); height: var(--control-h); } .kan-admin .kan-help__btn { width: 24px; height: 24px; } /* The 24 px „i" sits in an 18 px label line without making it taller, so two fields side by side (.kan-pairs) keep their inputs level whether or not one carries an „i". */ .kan-admin .kan-field__head { align-items: center; } .kan-admin .kan-field__head .kan-help { margin-block: -3px; } .kan-admin .kan-help__pop { padding: var(--space-3); } .kan-admin .kan-table td .kan-table__link { min-height: 24px; } .kan-admin .kan-date__button { height: var(--control-h); } /* --- Pagination: page x of y · total · ‹ Predchádzajúca / Ďalšia › on one line. Admin redizajn P1: the buttons keep their words — the old rule clipped every span, the icon included, and left two empty squares. */ .kan-admin .kan-pagination { min-height: 36px; gap: var(--space-3); } /* --- Detail screens and dialogs ------------------------------------------ */ .kan-admin .kan-contact { gap: var(--space-2); } .kan-admin .kan-note { padding-left: var(--space-3); gap: 2px; } .kan-admin .kan-dialog__card { gap: var(--space-3); } .kan-admin .kan-dialog__foot { gap: var(--space-3); } .kan-admin .kan-summary { padding: var(--space-3) var(--space-4); gap: 6px; } .kan-admin .kan-pageform { gap: var(--space-4); } .kan-admin .kan-pageform__main { gap: var(--space-4); } /* --- Sign-in --------------------------------------------------------------- */ .kan-admin-signin .kan-totp-input { font-size: 1.25rem; letter-spacing: 0.35em; } .kan-admin .kan-step-up .kan-totp-input { font-size: 1.25rem; letter-spacing: 0.35em; } .kan-admin .kan-step-up__step { gap: var(--space-3); } .kan-admin-signin .kan-admin-signin__head { gap: var(--space-3); } } /* Wide desk: four tiles in a row, and forms in two columns of text inputs (§3.2). */ @media (pointer: fine) and (min-width: 1180px) { .kan-admin__main--narrow .kan-account-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-field-gap) var(--space-4); align-items: start; } /* Everything that is not a plain text field spans the row: notes, checkboxes, actions, the file input, a textarea, and the grids that already pair two fields. */ .kan-admin__main--narrow .kan-account-form > :not(.kan-field), .kan-admin__main--narrow .kan-account-form > .kan-field:has(textarea), .kan-admin__main--narrow .kan-account-form > .kan-field:has(.kan-file), .kan-admin__main--narrow .kan-account-form > .kan-field:has(select) { grid-column: 1 / -1; } } /* Zdroje funnel (17. 9. 2026): the pills and tree rows follow the desktop density. */ @media (pointer: fine) { .kan-admin .kan-pill { min-height: 32px; padding-inline: var(--space-3); } .kan-admin .kan-funnel__how > summary { min-height: 28px; } .kan-admin .kan-funnel-table thead th { letter-spacing: 0.02em; } .kan-admin .kan-funnel-table__toggle { width: 28px; height: 28px; } .kan-admin .kan-funnel-table__toggle-slot { width: 28px; } .kan-admin .kan-funnel-table__detail .kan-funnel-table__name { padding-left: calc(28px + var(--space-2)); } } /* Zdroje → Odkazy (26. 9. 2026) · a suggestion row on a desk: 32 px, like the controls. */ @media (pointer: fine) { .kan-admin .kan-combo__option { min-height: 32px; } }