:root{--ssr-bg:#ffffff;--ssr-surface:#ffffff;--ssr-fg:#575757;--ssr-fg-secondary:#00578e;--ssr-fg-muted:#667085;--ssr-fg-faint:#888888;--ssr-border:#d8e5ef;--ssr-border-light:#edf2f7;--ssr-border-input:#c9d2dc;--ssr-disabled-bg:#f4f5f6;--ssr-disabled-border:#d8dde2;--ssr-disabled-fg:#68717b;--ssr-accent:#00578e;--ssr-accent-hover:#004570;--ssr-accent-contrast:#ffffff;--ssr-accent-soft:#eaf4fa;--ssr-nav-bg:#ffffff;--ssr-nav-fg:#00578e;--ssr-nav-item-fg:#00578e;--ssr-nav-item-hover-bg:#f2f7fa;--ssr-banner-bg:#e6e6e6;--ssr-banner-fg:#00578e;--ssr-banner-link-fg:#00578e;--ssr-brand-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABRQAAABQCAYAAABoF/k1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2RDg1QTEyRERGNzRFRjExQjI5M0U3M0JCMTEzQzQyMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDM0IwMjA2OTc0REYxMUVGQjRDNjlFMDc5MTBDMDU0NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDM0IwMjA2ODc0REYxMUVGQjRDNjlFMDc5MTBDMDU0NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjZEODVBMTJEREY3NEVGMTFCMjkzRTczQkIxMTNDNDIxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjZEODVBMTJEREY3NEVGMTFCMjkzRTczQkIxMTNDNDIxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+rh2yfQAAA7VJREFUeNrs3L9qFFEYxuGdYK83sApiqXY2wcLGzsJGBC/AahuLxQQvwL8oqCAWlkFt9Q5EsbGx0MZG1EuwEnH8hiyyhEBeyKCe5XngIzvhJHuYSfXjZLu+7ycAAAAAAIk1twAAAAAASAmKAAAAAEBMUAQAAAAAYoIiAAAAABATFAEAAACAmKAIAAAAAMQERQAAAAAgJigCAAAAADFBEQAAAACICYoAAAAAQExQBAAAAABigiIAAAAAEBMUAQAAAICYoAgAAAAAxARFAAAAACAmKAIAAAAAMUERAAAAAIgJigAAAABATFAEAAAAAGKCIgAAAAAQExQBAAAAgJigCAAAAADEBEUAAAAAICYoAgAAAAAxQREAAAAAiAmKAAAAAEBMUAQAAAAAYoIiAAAAABATFAEAAACAmKAIAAAAAMQERQAAAAAgJigCAAAAADFBEQAAAACICYoAAAAAQExQBAAAAABigiIAAAAAEOsmF++6CwAAAAAN659d+a/3190+7SG1/jc2f/3n9QG3AwAAAGD1fDuy/lffbzrzj7CrbDkKD0Gxd0sAAAAAmvS2Ji2Hl2q2lq5f1TyteTTiHi7XPN5j/Zua5zX3Pb42OaEIAAAA0K6b4bquZnOXn30wwh5uLL4OnWkerL810vvyjziLCgAAANCmjzUvwrXna44vXb+rOVRzdJ97+FDzcvH6Qs2xPda/rzlYc9jja5egCAAAANCm4aRf+lF2O08nXq+5OsIehlOO/XS2NpyA3AjWD6cZ5x5d2wRFAAAAgPZ8mWx//mHibM2ppevhVOGPmpP73MPnpT2cC37fp5rvNSc8vrYJigAAAADtuTfZjoKJazuuh9OJGyPs4U7Nz8XrzWD9cJrR6cQVMHxYZuc2AAAAAKysM7t8b2vMN/j68Nf6dBadW3vicbSv6/veXQAAAAAAIv7lGQAAAACICYoAAAAAQExQBAAAAABigiIAAAAAEBMUAQAAAICYoAgAAAAAxARFAAAAACAmKAIAAAAAMUERAAAAAIgJigAAAABATFAEAAAAAGKCIgAAAAAQExQBAAAAgJigCAAAAADEBEUAAAAAICYoAgAAAAAxQREAAAAAiAmKAAAAAEBMUAQAAAAAYoIiAAAAABATFAEAAACAmKAIAAAAAMQERQAAAAAgJigCAAAAADFBEQAAAACICYoAAAAAQExQBAAAAABigiIAAAAAEBMUAQAAAICYoAgAAAAAxARFAAAAACAmKAIAAAAAMUERAAAAAIj9FmAAa4g7r+0Ys24AAAAASUVORK5CYII=");--ssr-brand-logo:url("data:image/svg+xml;base64,PHN2ZyBpZD0iZUxQUjdKVFM0SDkxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTI0OSAzMzgiIHNoYXBlLXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiB0ZXh0LXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiBwcm9qZWN0LWlkPSI2ZGU4YWUyOTQyNDk0N2E3YTMwZjFmNGNkNzJkYTliMiIgZXhwb3J0LWlkPSIyNWRmMWIyZjI0MTA0MTc0YWZiN2ZmMmM1Y2Y0NmZhMCIgY2FjaGVkPSJmYWxzZSI+PGcgdHJhbnNmb3JtPSJtYXRyaXgoNi41NjY2IDAgMCA2LjU2NjYtNzguOTUyOTc5LTE5LjcxNDI0OSkiIGNsaXAtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTkwLjMsNTQuM3YtNTFoMi4zdjUxLjFoLTIuM3YtLjFaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxnIGNsaXAtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTczLDIxaC0xMi45di0xMy42YzAtMi4zLTEuOC00LjEtNC4xLTQuMWgtOS40YzMuNywxLjIsNy40LDUuMSw3LjcsMTIuMS4yLDQuMi0yLjYsMi42LDIuOCwxMC40YzEuOCwyLjYsMi4yLDMuOSwwLDUuMS0xLjUuOC0yLjEuNy0xLjIsMS45YzEuNCwxLjktMS45LDIuMS0uOCwyLjVjMSwuNCwxLjEsMi4yLS4yLDIuOS0zLjEsMSw1LjEsOC41LTcsOS42LTMuNC4zLTQuNS44LTQuMiw2LjNjMCwuMSwwLC4xLDAsLjJoMTIuM2MyLjMsMCw0LjEtMS44LDQuMS00LjF2LTEzLjZoMTIuOWMyLjYsMCw0LjctMi4xLDQuNy00Ljd2LTYuMkM3Ny42LDIzLjEsNzUuNSwyMSw3MywyMVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzAwOGMzYyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTQ1LjksNDUuNGMxMS0uMSw0LjItNS45LDYuMi03LjZjMS4zLS43LDEtMi4xLDAtMi41LTEuMS0uNCwyLjEtLjcuOC0yLjctLjgtMS4zLS40LTEuNywxLjItMi4zYzIuNC0uOCwxLjktMS44LjMtNC4yLTUuMy03LjgtMi40LTYuNy0yLjUtMTAuOS0uMy03LTQuNy0xMC45LTEwLjktMTJoLTExLjV2MTcuOEwxMiwyMXYxNS41aDE3LjV2MTcuOGgxMS4zYzAsMCwwLS4xLDAtLjItLjctNS4zLDEuOS04LjcsNS4xLTguN1oiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2U1MWUzYSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTQ3LjksNDcuOGMxMi0xLjEsMy45LTguNiw3LTkuNmMxLjMtLjcsMS4yLTIuNC4yLTIuOS0xLjEtLjQsMi4yLS42LjgtMi41LS45LTEuMy0uMy0xLjIsMS4yLTEuOWMyLjItMS4yLDEuOS0yLjUsMC01LjEtNS40LTcuNy0yLjYtNi4yLTIuOC0xMC40LS4zLTctNC0xMC45LTcuNy0xMi4xaC0zLjctLjQtMS41YzYuMywxLjEsMTAuNiw1LDEwLjksMTJjLjIsNC4yLTIuNywzLjEsMi41LDEwLjljMS42LDIuNCwyLjEsMy40LS4zLDQuMi0xLjYuNS0yLC45LTEuMiwyLjNjMS4zLDItMS45LDIuMy0uOCwyLjdjMSwuNCwxLjQsMS44LDAsMi41LTIsMS43LDQuOCw3LjQtNi4yLDcuNi0zLjMsMC01LjksMy40LTUuMiw4LjdjMCwuMSwwLC4xLDAsLjJoMS42LjQuOWMwLDAsMC0uMSwwLS4yLS4yLTUuNi45LTYsNC4zLTYuNFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTIyLjQsMzJoLTEuNjAwMDAxTDE4LjQsMjguNnYzLjRoLTEuOHYtNi40aDEuNjAwMDAxTDIwLjUsMjl2LTMuNGgxLjl2Ni40WiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMjkuMSwzMmgtMS42bC0yLjQtMy40djMuNGgtMS44MDAwMDF2LTYuNGgxLjVMMjcuMjAwMDAxLDI5di0zLjRoMS44OTk5OTl2Ni40WiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMzUuNywzMS41Yy0uMy4yLS42LjMtMSwuNC0uNS4xLTEsLjItMS41LjItLjkuMS0xLjktLjItMi42LS44LS42LS42LS45LTEuNS0uOS0yLjQtLjEtLjkuMy0xLjguOS0yLjUuNy0uNiwxLjctLjksMi43LS45LjQsMCwuNywwLDEuMS4xLjMsMCwuNi4xLjkuMnYxLjZjLS4zLS4xLS42LS4yLS45LS4ycy0uNi0uMS0uOS0uMWMtLjUsMC0xLC4xLTEuNC40LS4zLjQtLjUuOC0uNSwxLjNzLjEuOS40LDEuM2MuMy4zLjcuNCwxLjIuNC4yLDAsLjMsMCwuNSwwYy4xLDAsLjMtLjEuNC0uMXYtLjloLTEuMnYtMS4yaDIuOHYzLjJaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0zOS43OTk5OTksMjkuNnYyLjRMMzgsMzJ2LTIuNGwtMi4yOTk5OTktNGgxLjg5OTk5N0wzOC45MDAwMDIsMjhsMS4yOTk5OTktMi40aDEuODk5OTk3bC0yLjI5OTk5OSw0WiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNDYuNTk5OTk4LDMybC0xLjUtMi42LS42OTk5OTYuN3YxLjloLTEuODAwMDA0di02LjRoMS44MDAwMDR2Mi4zbDItMi4zaDIuMDk5OTk4bC0yLjI5OTk5OSwyLjYwMDAwMUw0OC41OTk5OTgsMzJoLTJaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMDUuMiwyOS4zdi0xOC45aDQuN2w3LjEsMTB2LTEwaDUuNXYxOC45aC00LjdsLTcuMS0xMHYxMGgtNS41WiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTI1LjgsMjkuM3YtMTguOWg0LjdsNy4xLDEwdi0xMGg1LjV2MTguOWgtNC43bC03LjEtMTB2MTBoLTUuNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTE1NS40LDI5LjZjLTMuNCwwLTUuOS0uOC03LjctMi41cy0yLjYtNC0yLjYtNy4xYzAtMy4yLjktNS42LDIuNy03LjNzNC41LTIuNiw4LTIuNmMxLjIsMCwyLjIuMSwzLjIuMi45LjEsMS44LjMsMi43LjZ2NC43Yy0uOS0uMy0xLjctLjYtMi43LS43LS45LS4xLTEuOS0uMi0yLjgtLjItMS44LDAtMy4yLjQtNC4xLDEuMnMtMS40LDIuMS0xLjQsNGMwLDEuNy40LDMsMS4yLDMuNy44LjgsMiwxLjEsMy41LDEuMS41LDAsMSwwLDEuNC0uMXMuOS0uMiwxLjMtLjN2LTIuOGgtMy44di0zLjRoOC40djkuNWMtLjcuNC0xLjcuOS0yLjksMS4yLTEuMi42LTIuNy44LTQuNC44WiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTcwLjIsMjkuM3YtNi45bC02LjgtMTJoNS43bDMuOCw3LjFsMy44LTcuMWg1LjdsLTYuOCwxMnY2LjloLTUuNFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTE4NC4yLDI5LjN2LTE4LjloNS41djYuN2w1LjctNi43aDYuM0wxOTUsMTguMWw3LjEsMTEuMWgtNS45bC00LjctNy42LTEuOSwyLjJ2NS41aC01LjRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMDUuMywzOS4xdi00LjFoMWwxLjYsMi4ydi0yLjJoMS4ydjQuMWgtMWwtMS42LTIuMnYyLjJoLTEuMloiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTExMC40LDM5LjF2LTQuMWgzLjF2LjloLTEuOXYuN2gxLjd2LjloLTEuN3YuN2gxLjl2LjloLTMuMVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTExNC42LDM5LjF2LTQuMWgxLjJsMSwyLjFsMS0yLjFoMS4ydjQuMWgtMS4ydi0yLjFsLS43LDEuNGgtLjdsLS43LTEuNHYyLjFoLTEuMVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTEyMCwzOS4xdi0uNmwxLjgtMi42aC0xLjd2LS45aDMuM3YuNmwtMS44LDIuNmgxLjh2LjloLTMuNFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTEyNC41LDM5LjF2LTQuMWgzLjF2LjloLTEuOXYuN2gxLjd2LjloLTEuN3YuN2gxLjl2LjloLTMuMVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTEyOS42LDM5LjF2LTMuMmgtMS4ydi0uOWgzLjV2LjloLTEuMnYzLjJoLTEuMVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTEzMi45LDM5LjF2LTQuMWgxLjJ2NC4xaC0xLjJaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMzcuNSwzOS4xdi00LjFoMWwxLjYsMi4ydi0yLjJoMS4ydjQuMWgtMWwtMS42LTIuMnYyLjJoLTEuMloiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTE0Mi41LDM5LjF2LTQuMWgzLjF2LjloLTEuOXYuN2gxLjd2LjloLTEuN3YuN2gxLjl2LjloLTMuMVptMS00LjRsLjYtMS4zaC45bC0uNiwxLjNoLS45WiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTQ2LjcsMzkuMXYtNC4xaDIuMWMuMywwLC42LjEuOC4ycy40LjMuNS42Yy4xLjIuMi41LjIuOHMtLjEuNi0uMi44LS4zLjQtLjUuNS0uNS4yLS44LjJoLS45djEuMWgtMS4ydi0uMVptMS4yLTJoLjZjLjIsMCwuMy0uMS40LS4ycy4xLS4yLjEtLjRzMC0uMy0uMS0uNC0uMi0uMi0uNC0uMmgtLjd2MS4yaC4xWiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTUxLjIsMzkuMXYtNC4xaDMuMXYuOWgtMS45di43aDEuN3YuOWgtMS43di43aDEuOXYuOWgtMy4xWiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTU3LjUsMzkuMmMtLjcsMC0xLjMtLjItMS43LS41LS40LS40LS42LS45LS42LTEuNnMuMi0xLjIuNi0xLjZzMS0uNiwxLjgtLjZjLjMsMCwuNSwwLC43LDBzLjQuMS42LjF2MWMtLjItLjEtLjQtLjEtLjYtLjFzLS40LDAtLjYsMGMtLjQsMC0uNy4xLS45LjNzLS4zLjUtLjMuOS4xLjcuMy44Yy4yLjIuNC4zLjguMy4xLDAsLjIsMCwuMywwcy4yLDAsLjMtLjF2LS42aC0uOHYtLjdoMS44djIuMWMtLjIuMS0uNC4yLS42LjMtLjQtLjEtLjcsMC0xLjEsMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTE2MC4yLDM5LjF2LTQuMWgzLjF2LjloLTEuOXYuN2gxLjd2LjloLTEuN3YuN2gxLjl2LjloLTMuMVptMS00LjRsLjYtMS4zaC45bC0uNiwxLjNoLS45WiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTY1LjgsMzkuMmMtLjMsMC0uNSwwLS44LS4xLS4yLDAtLjUtLjEtLjYtLjJ2LTFjLjIuMS40LjIuNi4ycy41LjEuNy4xLjQsMCwuNS0uMWMuMSwwLC4yLS4xLjItLjJzMC0uMi0uMS0uMmMtLjEtLjEtLjItLjEtLjMtLjFzLS4zLS4xLS41LS4yYy0uMy0uMS0uNS0uMi0uNy0uM3MtLjMtLjItLjQtLjQtLjEtLjMtLjEtLjZjMC0uNC4xLS43LjQtLjlzLjctLjMsMS4zLS4zYy4yLDAsLjUsMCwuNy4xLjIsMCwuNC4xLjYuMXYxYy0uMi0uMS0uNC0uMS0uNi0uMi0uMiwwLS40LS4xLS41LS4xLS4yLDAtLjMsMC0uNSwwLS4xLDAtLjIuMS0uMi4ycy4xLjIuMi4yLjMuMS42LjIuNi4yLjguMy4zLjMuNC40LjEuNC4xLjZjMCwuNC0uMS43LS40LjktLjQuNC0uOC42LTEuNC42WiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTY4LjQsMzkuMXYtLjZsMS44LTIuNmgtMS43di0uOWgzLjN2LjZMMTcwLDM4LjJoMS44di45aC0zLjRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xNzQuMiwzOS4yYy0uMywwLS41LDAtLjgtLjEtLjIsMC0uNS0uMS0uNi0uMnYtMWMuMi4xLjQuMi42LjJzLjUuMS43LjEuNCwwLC41LS4xYy4xLDAsLjItLjEuMi0uMnMwLS4yLS4xLS4yYy0uMS0uMS0uMi0uMS0uMy0uMXMtLjMtLjEtLjUtLjJjLS4zLS4xLS41LS4yLS43LS4zcy0uMy0uMi0uNC0uNC0uMS0uMy0uMS0uNmMwLS40LjEtLjcuNC0uOXMuNy0uMywxLjMtLjNjLjIsMCwuNSwwLC43LjEuMiwwLC40LjEuNi4xdjFjLS4yLS4xLS40LS4xLS42LS4yLS4yLDAtLjQtLjEtLjUtLjEtLjIsMC0uMywwLS41LDAtLjEsMC0uMi4xLS4yLjJzLjEuMi4yLjIuMy4xLjYuMi42LjIuOC4zLjMuMy40LjQuMS40LjEuNmMwLC40LS4xLjctLjQuOS0uMy40LS44LjYtMS40LjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xNzcuMSwzOS4xdi00LjFoMy4xdi45aC0xLjl2LjdoMS43di45aC0xLjd2LjdoMS45di45aC0zLjFabTEtNC40bC42LTEuM2guOWwtLjYsMS4zaC0uOVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTE4My4zLDM5LjJjLS43LDAtMS4zLS4yLTEuNy0uNS0uNC0uNC0uNi0uOS0uNi0xLjZzLjItMS4yLjYtMS42czEtLjYsMS44LS42Yy4zLDAsLjUsMCwuNywwcy40LjEuNi4xdjFjLS4yLS4xLS40LS4xLS42LS4xcy0uNCwwLS42LDBjLS40LDAtLjcuMS0uOS4zcy0uMy41LS4zLjkuMS43LjMuOGMuMi4yLjQuMy44LjMuMSwwLC4yLDAsLjMsMHMuMiwwLC4zLS4xdi0uNmgtLjh2LS43aDEuOHYyLjFjLS4yLjEtLjQuMi0uNi4zLS40LS4xLS43LDAtMS4xLDBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xODgsMzkuMmMtLjQsMC0uNy0uMS0xLS4ycy0uNS0uMy0uNy0uNmMtLjItLjItLjMtLjUtLjMtLjl2LTIuNWgxLjJ2Mi40YzAsLjUuMy44LjguOC4yLDAsLjQtLjEuNi0uMi4xLS4xLjItLjMuMi0uNnYtMi40aDEuMnYyLjVjMCwuNC0uMS43LS4yLjktLjIuMi0uNC40LS43LjYtLjQuMS0uOC4yLTEuMS4yWm0tMS4yLTQuN3YtLjhoLjh2LjhoLS44Wm0xLjQsMHYtLjhoLjh2LjhoLS44WiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTkzLjIsMzkuMmMtLjcsMC0xLjMtLjItMS43LS41LS40LS40LS42LS45LS42LTEuNnMuMi0xLjIuNi0xLjZzMS0uNiwxLjgtLjZjLjMsMCwuNSwwLC43LDBzLjQuMS42LjF2MWMtLjItLjEtLjQtLjEtLjYtLjFzLS40LDAtLjYsMGMtLjQsMC0uNy4xLS45LjNzLS4zLjUtLjMuOS4xLjcuMy44Yy4yLjIuNC4zLjguMy4xLDAsLjIsMCwuMywwcy4yLDAsLjMtLjF2LS42aC0uOXYtLjdoMS44djIuMWMtLjIuMS0uNC4yLS42LjMtLjMtLjEtLjYsMC0xLDBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xOTcuMSwzOS4xdi0xLjVMMTk1LjYsMzVoMS4zbC44LDEuNi44LTEuNmgxLjNsLTEuNSwyLjZ2MS41aC0xLjJaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0yMDAuOCwzOS4xdi00LjFoMS4ydjQuMWgtMS4yWiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTA1LjMsNDYuOHYtNC4xaDMuMXYuOWgtMS45di43aDEuN3YuOWgtMS43di43aDEuOXYuOWgtMy4xWm0xLTQuNGwuNi0xLjNoLjlsLS42LDEuM2gtLjlaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMTAuNSw0Ni45Yy0uMywwLS41LDAtLjgtLjEtLjIsMC0uNS0uMS0uNi0uMnYtMWMuMi4xLjQuMi42LjJzLjUuMS43LjEuNCwwLC41LS4xYy4xLDAsLjItLjEuMi0uMnMwLS4yLS4xLS4yYy0uMS0uMS0uMi0uMS0uMy0uMXMtLjMtLjEtLjUtLjJjLS4zLS4xLS41LS4yLS43LS4zcy0uMy0uMi0uNC0uNC0uMS0uMy0uMS0uNmMwLS40LjEtLjcuNC0uOXMuNy0uMywxLjMtLjNjLjIsMCwuNSwwLC43LjEuMiwwLC40LjEuNi4xdjFjLS4yLS4xLS40LS4xLS42LS4yLS4yLDAtLjQtLjEtLjUtLjEtLjIsMC0uMywwLS41LDAtLjEsMC0uMi4xLS4yLjJzLjEuMi4yLjIuMy4xLjYuMi42LjIuOC4zLjMuMy40LjQuMS40LjEuNmMwLC40LS4xLjctLjQuOS0uNC41LS45LjYtMS40LjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMTYuMiw0Ni45Yy0uNywwLTEuMy0uMi0xLjctLjUtLjQtLjQtLjYtLjktLjYtMS42cy4yLTEuMi42LTEuNnMxLS42LDEuOC0uNmMuMywwLC41LDAsLjcsMHMuNC4xLjYuMXYxYy0uMi0uMS0uNC0uMS0uNi0uMXMtLjQsMC0uNiwwYy0uNCwwLS43LjEtLjkuM3MtLjMuNS0uMy45LjEuNy4zLjhjLjIuMi40LjMuOC4zLjEsMCwuMiwwLC4zLDBzLjIsMCwuMy0uMXYtLjZoLS44di0uN2gxLjh2Mi4xYy0uMi4xLS40LjItLjYuMy0uNC0uMS0uOCwwLTEuMSwwWiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTE5LjUsNDYuOHYtMS41TDExOCw0Mi43aDEuM2wuOCwxLjYuOC0xLjZoMS4zbC0xLjUsMi42djEuNWgtMS4yWiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTI0LjIsNDYuOWMtLjcsMC0xLjItLjItMS42LS41cy0uNS0uOS0uNS0xLjZjMC0uNS4xLS45LjItMS4ycy40LS41LjctLjcuNy0uMiwxLjItLjIuOC4xLDEuMi4yLjYuNC43LjcuMi43LjIsMS4yYzAsLjctLjIsMS4zLS41LDEuNi0uNC4zLS45LjUtMS42LjVabTAtMWMuMywwLC41LS4xLjctLjMuMS0uMi4yLS41LjItLjhjMC0uNC0uMS0uNy0uMi0uOXMtLjQtLjMtLjctLjMtLjUuMS0uNy4zYy0uMS4yLS4yLjUtLjIuOXMuMS43LjIuOGMuMi4yLjQuMy43LjNabS0uNS0zLjVsLjYtMS4zaC45bC0uNiwxLjNoLS45WiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTI5LDQ2LjljLS43LDAtMS4zLS4yLTEuNy0uNS0uNC0uNC0uNi0uOS0uNi0xLjZzLjItMS4yLjYtMS42czEtLjYsMS44LS42Yy4zLDAsLjUsMCwuNywwcy40LjEuNi4xdjFjLS4yLS4xLS40LS4xLS42LS4xcy0uNCwwLS42LDBjLS40LDAtLjcuMS0uOS4zcy0uMy41LS4zLjkuMS43LjMuOGMuMi4yLjQuMy44LjMuMSwwLC4yLDAsLjMsMHMuMiwwLC4zLS4xdi0uNmgtLjh2LS43aDEuOHYyLjFjLS4yLjEtLjQuMi0uNi4zLS4zLS4xLS43LDAtMS4xLDBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMzIuNCw0Ni44di0xLjVsLTEuNS0yLjZoMS4zbC44LDEuNi44LTEuNmgxLjNsLTEuNSwyLjZ2MS41aC0xLjJaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMzYuNyw0Ni45Yy0uMywwLS41LDAtLjgtLjEtLjIsMC0uNS0uMS0uNi0uMnYtMWMuMi4xLjQuMi42LjJzLjUuMS43LjEuNCwwLC41LS4xYy4xLDAsLjItLjEuMi0uMnMwLS4yLS4xLS4yYy0uMS0uMS0uMi0uMS0uMy0uMXMtLjMtLjEtLjUtLjJjLS4zLS4xLS41LS4yLS43LS4zcy0uMy0uMi0uNC0uNC0uMS0uMy0uMS0uNmMwLS40LjEtLjcuNC0uOXMuNy0uMywxLjMtLjNjLjIsMCwuNSwwLC43LjEuMiwwLC40LjEuNi4xdjFjLS4yLS4xLS40LS4xLS42LS4yLS4yLDAtLjQtLjEtLjUtLjEtLjIsMC0uMywwLS41LDAtLjEsMC0uMi4xLS4yLjJzLjEuMi4yLjIuMy4xLjYuMi42LjIuOC4zLjMuMy40LjQuMS40LjEuNmMwLC40LS4xLjctLjQuOS0uNC41LS44LjYtMS40LjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMzguOSw0Ni44di0uNmwxLjgtMi42aC0xLjd2LS45aDMuM3YuNmwtMS44LDIuNmgxLjh2LjloLTMuNFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTE0Mi45LDQ2Ljh2LTQuMWgzLjF2LjloLTEuOXYuN2gxLjd2LjloLTEuN3YuN2gxLjl2LjloLTMuMVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTE0Ni43LDQ2Ljh2LTQuMWgyLjJjLjMsMCwuNi4xLjguMnMuNC4zLjUuNS4yLjUuMi44LS4xLjUtLjIuNy0uMy40LS42LjVjMCwwLC4xLjEuMS4xcy4xLjEuMS4ybC41LDEuMWgtMS4zbC0uNC0xYzAtLjEtLjEtLjEtLjEtLjJjMCwwLS4xLDAtLjIsMGgtLjN2MS4yaC0xLjNabTEuMi0yLjFoLjZjLjIsMCwuMywwLC40LS4xcy4xLS4yLjEtLjRjMC0uNC0uMi0uNS0uNS0uNWgtLjd2MWguMVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTE1MC45LDQ2Ljh2LTQuMWgzLjF2LjloLTEuOXYuN2gxLjd2LjloLTEuN3YuN2gxLjl2LjloLTMuMVptMS00LjRsLjYtMS4zaC45bC0uNiwxLjNoLS45WiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTU2LjEsNDYuOWMtLjMsMC0uNSwwLS44LS4xLS4yLDAtLjUtLjEtLjYtLjJ2LTFjLjIuMS40LjIuNi4ycy41LjEuNy4xLjQsMCwuNS0uMWMuMSwwLC4yLS4xLjItLjJzMC0uMi0uMS0uMmMtLjEtLjEtLjItLjEtLjMtLjFzLS4zLS4xLS41LS4yYy0uMy0uMS0uNS0uMi0uNy0uM3MtLjMtLjItLjQtLjQtLjEtLjMtLjEtLjZjMC0uNC4xLS43LjQtLjlzLjctLjMsMS4zLS4zYy4yLDAsLjUsMCwuNy4xLjIsMCwuNC4xLjYuMXYxYy0uMi0uMS0uNC0uMS0uNi0uMi0uMiwwLS40LS4xLS41LS4xLS4yLDAtLjMsMC0uNSwwLS4xLDAtLjIuMS0uMi4ycy4xLjIuMi4yLjMuMS42LjIuNi4yLjguMy4zLjMuNC40LjEuNC4xLjZjMCwuNC0uMS43LS40LjktLjQuNS0uOS42LTEuNC42WiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTU4LjIsNDYuOHYtLjZsMS44LTIuNmgtMS43di0uOWgzLjN2LjZsLTEuOCwyLjZoMS44di45aC0zLjRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xNjIuMyw0Ni44di00LjFoMy4xdi45aC0xLjl2LjdoMS43di45aC0xLjd2LjdoMS45di45aC0zLjFaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xNjYuOSw0Ni44di0zLjJoLTEuMnYtLjloMy41di45aC0xLjJ2My4yaC0xLjFaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xNjkuOCw0Ni44di00LjFoMS4ydjQuMWgtMS4yWiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTcyLjksNDYuOHYtNC4xaDEuMnYxLjVsMS4zLTEuNWgxLjRsLTEuNSwxLjdsMS42LDIuNGgtMS4zbC0xLTEuNy0uNC41djEuMmgtMS4zWiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTc5LjIsNDYuOWMtLjcsMC0xLjItLjItMS42LS41cy0uNS0uOS0uNS0xLjZjMC0uNS4xLS45LjItMS4ycy40LS41LjctLjcuNy0uMiwxLjItLjIuOC4xLDEuMi4yLjYuNC43LjcuMi43LjIsMS4yYzAsLjctLjIsMS4zLS41LDEuNi0uNC4zLS45LjUtMS42LjVabS0xLjEtNC43di0uOGguOHYuOGgtLjhabTEuMSwzLjdjLjMsMCwuNS0uMS43LS4zLjEtLjIuMi0uNS4yLS44YzAtLjQtLjEtLjctLjItLjlzLS40LS4zLS43LS4zLS41LjEtLjcuM2MtLjEuMi0uMi41LS4yLjlzLjEuNy4yLjhjLjIuMi40LjMuNy4zWm0uMy0zLjd2LS44aC44di44aC0uOFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTE4MS43LDQ2Ljh2LS42bDEuOC0yLjZoLTEuN3YtLjloMy4zdi42bC0xLjgsMi42aDEuOHYuOWgtMy40WiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTg1LjcsNDYuOHYtNC4xaDIuMWMuMywwLC42LjEuOC4ycy40LjMuNS42Yy4xLjIuMi41LjIuOHMtLjEuNi0uMi44LS4zLjQtLjUuNS0uNS4yLS44LjJoLS45djEuMWgtMS4ydi0uMVptMS4yLTJoLjZjLjIsMCwuMy0uMS40LS4ycy4xLS4yLjEtLjRzMC0uMy0uMS0uNC0uMi0uMi0uNC0uMmgtLjd2MS4yaC4xWiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNTc1NzU2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTkxLjgsNDYuOWMtLjcsMC0xLjItLjItMS42LS41cy0uNS0uOS0uNS0xLjZjMC0uNS4xLS45LjItMS4ycy40LS41LjctLjcuNy0uMiwxLjItLjIuOC4xLDEuMi4yLjYuNC43LjcuMi43LjIsMS4yYzAsLjctLjIsMS4zLS41LDEuNi0uNC4zLS45LjUtMS42LjVabTAtMWMuMywwLC41LS4xLjctLjMuMS0uMi4yLS41LjItLjhjMC0uNC0uMS0uNy0uMi0uOXMtLjQtLjMtLjctLjMtLjUuMS0uNy4zYy0uMS4yLS4yLjUtLjIuOXMuMS43LjIuOGMuMi4yLjQuMy43LjNaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xOTQuNiw0Ni44di00LjFoMWwxLjYsMi4ydi0yLjJoMS4ydjQuMWgtMWwtMS42LTIuMnYyLjJoLTEuMloiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzU3NTc1NiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTIwMCw0Ni44di0zLjJoLTEuMnYtLjloMy41di45aC0xLjJ2My4yaC0xLjFaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM1NzU3NTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L2c+PC9zdmc+DQo=");--ssr-title-size:clamp(2rem, 4vw, 2.75rem);--ssr-title-weight:300;--ssr-map-bg:#eeeeff;--ssr-row-hover:#eef7fc;--ssr-row-selected:#eaf4fa;--ssr-th-bg:#00578e;--ssr-th-fg:#ffffff;--ssr-progress-track:rgba(0,87,142,0.18);--ssr-progress-value:#00578e;--ssr-option-table-label-min:12rem;--ssr-option-table-col-min:5rem;--ssr-grid-cell-padding-y:0.75rem;--ssr-grid-cell-padding-x:0.85rem;--ssr-row-alt-bg:#f4f7fa;--ssr-danger:#e51e3a;--ssr-danger-bg:#fff4f6;--ssr-danger-border:#e51e3a;--ssr-container-width:1300px;--ssr-container-gutter:1rem;--ssr-layout-main-padding:1.5rem 0 2rem} /* DOKUMENTUM-SZINTŰ réteg — a keret SAJÁT lapjáé (`ssr-shell.html`), nem a `.ssr-*` vázé. Ezért él külön fájlban: ezek az egyetlen szabályok, amik a GAZDA-dokumentumot írják át (`*`, `html`, `body`), és egy IDEGEN lapba ágyazott fragmentumnak (statikus oldal SSR-lyuka, l. `ssr-static-page.ts`) nem szabad átírnia a gazdalap alapjait — egy 2017-es sablonnál a `box-sizing:border-box` és a `body` háttér nem stílus-hozzáadás, hanem a meglévő elrendezés felülírása. A kibocsátást a `composeSsrCss({ ownsDocument })` dönti el; a `tests/ssr-css-document-scope.test.ts` őrzi, hogy a két fájl ne keveredjen vissza. A `body > .ssr-layout` alakú szabályok SZÁNDÉKOSAN a vázban maradnak: azok a keret gyökér-layoutjára szűkítettek, tehát fragmentumban nincs mire illeszkedniük. */ *{box-sizing:border-box} /* A görgetősáv helye MINDIG le van foglalva. Enélkül a rövid lapnak (ami elfér a képernyőn) nincs görgetősávja, tehát 10-17 px-cel szélesebb, és a középre zárt tartalom fele annyival odébb kerül — lapváltáskor az egész oldal megugrik. Mérve (2026-07-31, `szures`): az „Információk" lapon a menü közepe 700, a listás lapokon 695 — pontosan a félsávnyi 5 px. Az SSR-lapok közti navigáció valódi dokumentum-váltás, tehát ez minden több-lapos SSR-projektet érint; ezért keret-alapértelmezés. Ahol a böngésző nem ismeri (régebbi Safari), a viselkedés a mai marad. */ html{scrollbar-gutter:stable} /* Téma-követő görgetősáv. Minden értéke tokenből jön, tehát ez nem paletta- döntés, hanem a `--ssr-*` vokabulár következetes alkalmazása: a natív szürke sáv az egyetlen elem, ami minden témában ugyanúgy nézett ki. A `scrollbar-color` (FF, Chrome 121+, Safari 18+) és a webkit-pszeudoelemek együtt fedik a böngészőket; ahol egyik sem ismert, a natív sáv marad. */ *{scrollbar-width:thin;scrollbar-color:var(--ssr-accent) transparent} *::-webkit-scrollbar{width:6px;height:6px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{border-radius:999px;background:var(--ssr-accent)} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ssr-fg);background:var(--ssr-bg)} /* A shell által renderelt `.ssr-*` DOM téma-semleges VÁZA — a keret alaprétege, a `composeSsrCss` mindig kibocsátja (tokenek után, design- stíluslapok előtt). Minden színe `--ssr-*` token: a palettát a design-témák adják (`registerSsrDesign`), egy téma ezért önmagában teljes — nem kell másik design-csomagot elé tölteni. Korábban a `classic` témát hordozó design-csomag stíluslapja volt, de a váz téma-független, ezért a protokoll- tulajdonosnál él. Itt CSAK `.ssr-*`-ra szűkített szabály állhat: a dokumentumot átíró (`*`, `html`, `body`) réteg az `ssr-document.css`-ben él, mert azt csak a keret saját lapja bocsáthatja ki — l. az ottani fejlécet. */ .ssr-layout{display:flex;flex-direction:column} /* A teljes-magasság csak a GYÖKÉR layoutra: a `layout` node bármely slotba ágyazható (lábléc-blokk, panel-tartalom), és ott a 100vh nyilvánvalóan rossz. Mérve: a `szures` `min-height: 0`-val vonta vissza egy beágyazott layoutnál — a kompenzáció maga volt a jelzés, hogy a szabály túl széles. */ body>.ssr-layout{min-height:100vh} /* A shell tartalom-sávjainak középre zárása. Alapérték: teljes szélesség, tehát a meglévő projektek megjelenése nem változik. A `szures` ugyanezt az értéket három külön szabályban ismételte (`min(100% - 2rem, 1300px)`). */ .ssr-nav-inner,body>.ssr-layout>.ssr-layout-row{width:min(100% - (var(--ssr-container-gutter,0px) * 2),var(--ssr-container-width,100%));margin-inline:auto} /* Az app-shell viselkedése (rugalmas sor, görgő fő-régió) CSAK a GYÖKÉR layoutra — ugyanaz a lecke, mint fent a `100vh`-nál, most végigvezetve. A `layout` node bármely slotba ágyazható (lábléc-blokk, panel-tartalom), és ott a flex-sor + `overflow:auto` a dokumentum-folyamot töri meg; a `szures` ezért vonta vissza KÉT helyen (gyökér és panel). A padding viszont minden layoutra érvényes, tokenből. */ body>.ssr-layout>.ssr-layout-row{display:flex;flex:1;min-height:0} /* A fő régió NEM görgető-konténer. Az `overflow:auto` app-shell-mintát feltételez (rögzített magasságú váz, belül görgő tartalom), a gyökér-layout viszont `min-height:100vh` — tehát a váz a tartalommal NŐ, és a görgetés mindig a DOKUMENTUMON történik. Mérve (2026-08-26, ogyelf4, 390×740): `main.clientHeight === main.scrollHeight === 43394`, `main.scrollTop === 0` — a görgő doboz sosem görgött. Két kárt viszont okozott: (1) a nézetablak helyett EHHEZ igazodott minden `position:sticky` a fő régióban, tehát a tapadó fejléc sosem tapadt (mérve: −300 px a nézetablak teteje fölött); (2) a vízszintes túlcsordulás itt PANORÁMÁZHATÓ sávvá vált (mérve: `scrollWidth 962` vs. `clientWidth 364`, 598 px-et lehetett oldalra húzni az egész kérdőívet). A `min-width:0` viszont kell: flex-elemként az automatikus minimum a tartalom min-content szélessége lenne, és a széles tábla a SORT feszítené szét. */ body>.ssr-layout>.ssr-layout-row>.ssr-layout-main{flex:1;min-width:0} .ssr-layout-top{flex:0 0 auto} .ssr-layout-main{padding:var(--ssr-layout-main-padding,1rem)} .ssr-layout-left,.ssr-layout-right{flex:0 0 240px;padding:1rem;background:var(--ssr-surface);border-right:1px solid var(--ssr-border)} .ssr-layout-right{border-right:0;border-left:1px solid var(--ssr-border)} .ssr-layout-bottom{flex:0 0 auto;padding:.5rem 1rem;background:var(--ssr-surface);border-top:1px solid var(--ssr-border)} .ssr-nav{background:var(--ssr-nav-bg);color:var(--ssr-nav-fg)} /* KITÖLTÖTTSÉG-CSÍK. A százalék KI VAN ÍRVA („Kitöltve 42%") — egy szám nélküli vékony sín nem magyarázza meg magát —, és ugyanez megy az `aria-valuenow`/`aria-valuetext` párba is. A kitöltést `transform: scaleX` mozgatja (nem `width`), így nincs layout-újraszámolás minden leütésnél. */ .ssr-form-progress{width:100%} .ssr-form-progress-text{display:block;font-size:.85rem;line-height:1.3;white-space:nowrap} .ssr-form-progress-track{display:block;block-size:3px;background:var(--ssr-progress-track);border-radius:999px;overflow:hidden} .ssr-form-progress-value{display:block;block-size:100%;background:var(--ssr-progress-value);transform:scaleX(0);transform-origin:left center;transition:transform 180ms ease-out} @media (prefers-reduced-motion:reduce){.ssr-form-progress-value{transition:none}} .ssr-nav-inner{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem 1rem;padding:.5rem 1rem} .ssr-nav-brand{font-weight:600} .ssr-nav-items{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem} .ssr-nav-item{display:inline-block;padding:.5rem .9rem;color:var(--ssr-nav-item-fg);text-decoration:none;border-radius:.25rem} .ssr-nav-item:hover{background:var(--ssr-nav-item-hover-bg);color:var(--ssr-nav-fg)} .ssr-nav-item-active{background:var(--ssr-accent);color:var(--ssr-accent-contrast)} .ssr-cards{display:block} .ssr-cards-title{margin:0 0 .75rem;font-size:1rem;color:var(--ssr-fg-secondary)} .ssr-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem} .ssr-card{background:var(--ssr-surface);border:1px solid var(--ssr-border);border-radius:.4rem;padding:.75rem} .ssr-card-field{display:flex;gap:.4rem;font-size:.875rem;line-height:1.4} .ssr-card-label{color:var(--ssr-fg-muted);flex:0 0 35%} .ssr-card-value{color:var(--ssr-fg);flex:1;word-break:break-word} .ssr-cards-empty,.ssr-cards-error{color:var(--ssr-fg-faint);font-style:italic;padding:.75rem 0} .ssr-cards-error{color:var(--ssr-danger)} /* Címsor-MÉRETEZÉS a designban, nem a komponensben: a `.ssr-text-title` maga csak reset (l. `vanilla-text.ssr.css`). A tag-szelektor a lényeg — csak a valódi címsor kap címsor-megjelenést, a `level` nélküli `
` a törzsszöveget örökli. A LAPCÍM egy szemantika, HÁROM komponensben: a `text` node `level: 1`-e, a `content` node és a `record` node saját `

`-e ugyanazt a szerepet tölti be (l. a `level` kulcs leírását: „a `record` és a `content` node-ok maguk rendelik a saját `

`-üket"), ezért mind ugyanabból a két tokenből él. Amíg külön beégetett méretet vittek, a téma kénytelen volt a saját tipográfiáját többször kimondani — és amelyiket kifelejtette, ott a lapcím némán a keret-alapértelmezésre esett (mérve: a `szures` négy rekord-oldala 1.5rem szürkével, a lista-oldalak 2.75rem márka-kékkel). Fallback nincs: a tokent minden téma megadja (pin: `component-vanilla/tests/design-presets.test.ts`), ahogy a `--ssr-grid-cell-padding-*`-ot is. */ h1.ssr-text-title,h1.ssr-content-title,h1.ssr-record-title{font-size:var(--ssr-title-size);font-weight:var(--ssr-title-weight)} h2.ssr-text-title{font-size:1.4rem;font-weight:600} h3.ssr-text-title{font-size:1.2rem;font-weight:600} h4.ssr-text-title,h5.ssr-text-title,h6.ssr-text-title{font-size:1.05rem;font-weight:600} .ssr-content{max-width:780px;margin:0 auto;padding:1rem 0;line-height:1.55} .ssr-content-title{margin:.25rem 0 1rem} .ssr-content-body{font-size:1rem} .ssr-content-body img{max-width:100%;height:auto} .ssr-content-body h2{font-size:1.2rem;margin-top:1.4rem} .ssr-content-error{color:var(--ssr-danger);font-style:italic} .ssr-search-form{padding:.5rem 1rem;background:var(--ssr-surface);border-bottom:1px solid var(--ssr-border)} .ssr-search-form-inner{display:flex;gap:.4rem;align-items:center;max-width:780px;margin:0 auto} /* A `title` kulcs feliratának alap-metrikája: a rugalmas sorban teljes szélességű, böngésző-default h2-margó nélkül. A tipográfiát a téma adja. */ .ssr-search-form-title{flex:1 0 100%;margin:0;font-size:1rem} .ssr-search-form-input{flex:1;padding:.45rem .6rem;border:1px solid var(--ssr-border-input);border-radius:.3rem;font-size:.95rem} /* TOOLBAR — a gombok linkek vagy űrlap-gombok, de EGYFORMÁN néznek ki: a felhasználónak a művelet számít, nem az, hogy a keret melyik HTML-elemmel valósítja meg. Ezért közös `.ssr-toolbar-btn` alap, és akciónkénti `.ssr-toolbar-btn-` a designnak (pl. az elsődleges Keresés kiemelése) — sorrend- és feliratfüggetlenül. */ .ssr-toolbar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center} /* A séma-akciót hívó gomb saját `
`-ot hoz (a rekord-gombsorban nincs befoglaló űrlap). Az űrlap csak a POST-payload hordozója, elrendezésben nem vesz részt: `display: contents`-szel a GOMB marad a toolbar flex-eleme, tehát a link- és az űrlap-gomb egyformán viselkedik — pontosan azt a különbséget tünteti el, amit a közös `.ssr-toolbar-btn` a megjelenésben. */ .ssr-toolbar-form{display:contents} .ssr-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .9rem;border:1px solid var(--ssr-border);border-radius:.3rem;background:var(--ssr-surface);color:var(--ssr-fg);text-decoration:none;font:inherit;font-size:.9rem;cursor:pointer;white-space:nowrap} .ssr-toolbar-btn:hover{background:var(--ssr-row-hover);color:var(--ssr-fg)} /* Ikon-slot: a méretezés a konténeré, a festés a designé — ugyanaz a szereposztás, mint a menü ikon-slotjánál. */ /* IKON-ONLY gomb: a vízszintes padding a függőlegessel egyezik, hogy négyzetes legyen és ne a felirat-méretű dobozt örökölje. A jelölőt a renderelő adja (`iconOnly`), tehát nem a tartalomra szelektálunk: ikon + felirat esetén a gomb a normál dobozt viseli, csak a kettő közé kell köz. `:where()`-rel, hogy a design felülírhassa. */ .ssr-toolbar-btn:where(.ssr-toolbar-btn-icon-only){padding:.45rem} .ssr-toolbar-btn:where(:has(.ssr-toolbar-btn-icon):not(.ssr-toolbar-btn-icon-only)){gap:.4rem} .ssr-toolbar-btn-icon{display:inline-flex;align-items:center;height:1.15em} .ssr-toolbar-btn-icon > *{display:block;width:auto;height:100%} .ssr-toolbar-btn-search{background:var(--ssr-accent);border-color:var(--ssr-accent);color:var(--ssr-accent-contrast)} .ssr-toolbar-btn-search:hover{background:var(--ssr-accent-hover);border-color:var(--ssr-accent-hover);color:var(--ssr-accent-contrast)} .ssr-search-form-empty{color:var(--ssr-fg-faint);font-style:italic;padding:.5rem 0} .ssr-grid{padding:.5rem 0} .ssr-grid-title{margin:0 0 .5rem;font-size:1rem;color:var(--ssr-fg-secondary)} .ssr-grid-table{width:100%;border-collapse:collapse;background:var(--ssr-surface);border:1px solid var(--ssr-border)} .ssr-grid-table th,.ssr-grid-table td{padding:var(--ssr-grid-cell-padding-y) var(--ssr-grid-cell-padding-x);border-bottom:1px solid var(--ssr-border-light);text-align:left;font-size:.9rem} .ssr-grid-table th{background:var(--ssr-th-bg);font-weight:600;color:var(--ssr-th-fg)} .ssr-grid-sort{color:inherit;text-decoration:none;display:inline-block;width:100%} .ssr-grid-table th[aria-sort]{cursor:pointer;user-select:none;white-space:nowrap} .ssr-grid-table th[aria-sort]::after{content:"\2195";margin-left:.35rem;opacity:.45} .ssr-grid-table th[aria-sort="ascending"]::after{content:"\2191";opacity:1} .ssr-grid-table th[aria-sort="descending"]::after{content:"\2193";opacity:1} .ssr-grid-sort:hover,.ssr-grid-sort:focus-visible{text-decoration:underline} .ssr-grid-row{cursor:pointer} .ssr-grid-row a{color:inherit;text-decoration:none;display:block} /* Mindhárom sor-háttér a CELLÁN és AZONOS specificitáson (0,2,2) — a sorrend dönt: zebra < kijelölt < hover. Korábban a zebra nem volt keret-képesség, a hover/kijelölt pedig a ``-en ült; egy cella-szintű projekt-zebra átfestette őket, ezért a projektnek MINDKETTŐT újra ki kellett mondania. */ .ssr-grid-row:nth-child(even) td{background:var(--ssr-row-alt-bg,transparent)} .ssr-grid-row.ssr-grid-row-selected td{background:var(--ssr-row-selected)} .ssr-grid-row:hover td{background:var(--ssr-row-hover)} .ssr-grid-empty,.ssr-grid-error{color:var(--ssr-fg-faint);font-style:italic;padding:.5rem .75rem} .ssr-grid-error{color:var(--ssr-danger)} .ssr-grid-count{margin:0 0 .5rem;color:var(--ssr-fg-secondary);font-size:.9rem} .ssr-grid-pager-bar{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;padding:.6rem var(--ssr-grid-cell-padding-x)} .ssr-grid-range{margin:0;color:var(--ssr-fg-muted);font-size:.85rem} .ssr-grid-pager{display:flex;flex-wrap:wrap;gap:.25rem} .ssr-grid-page{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;min-height:2.5rem;padding:0 .6rem;border:1px solid var(--ssr-border);border-radius:.3rem;color:var(--ssr-fg);text-decoration:none;font-size:.9rem} .ssr-grid-page:hover{background:var(--ssr-row-hover)} .ssr-grid-page-current{background:var(--ssr-accent);border-color:var(--ssr-accent);color:var(--ssr-accent-contrast);font-weight:600} .ssr-grid-page-gap{display:inline-flex;align-items:center;min-height:2.5rem;padding:0 .25rem;color:var(--ssr-fg-faint)} .ssr-grid-detail-cell{white-space:nowrap;text-align:right} /* A sor-végi gombsor a táblázatban LINKNEK néz ki, nem dobozos gombnak: a cella egy szűk, jobbra zárt oszlop vége, ahol a keretes gomb a sor-ritmust törné meg. Ugyanaz a szerep, ugyanaz a szótár (`.ssr-toolbar-btn`), csak a táblázat-kontextusban más a megjelenés — a döntés ezért ITT van, a cellára szűkítve, nem a gomb-alapban. */ .ssr-grid-detail-cell .ssr-toolbar{justify-content:flex-end} .ssr-grid-detail-cell .ssr-toolbar-btn{padding:0;border:0;background:none;color:var(--ssr-accent);font-size:.85rem} .ssr-grid-detail-cell .ssr-toolbar-btn:hover{background:none;color:var(--ssr-accent);text-decoration:underline} .ssr-record{padding:.5rem 0} .ssr-record-title{margin:0 0 1rem} /* A gombsor a cím és az adatok KÖZÖTT áll; a köz mindkét oldalán ugyanaz, hogy a sáv önálló vezérlő-sornak látsszon, ne az adatlap keretére ragadjon. A szabály a rekordra szűkít: a toolbar máshol (kereső-űrlap) egy flex-sor eleme, ott a szülő `gap`-je adja a közt. */ .ssr-record > .ssr-toolbar{margin-bottom:1rem} .ssr-record-fields{margin:0;background:var(--ssr-surface);border:1px solid var(--ssr-border);border-radius:.3rem} .ssr-record-row{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding:.5rem .75rem;border-bottom:1px solid var(--ssr-border-light)} .ssr-record-row:last-child{border-bottom:0} .ssr-record-label{margin:0;min-width:10rem;font-weight:600;color:var(--ssr-fg-secondary);font-size:.9rem} .ssr-record-value{margin:0;flex:1 1 12rem;font-size:.9rem;color:var(--ssr-fg)} .ssr-record-empty,.ssr-record-error{color:var(--ssr-fg-faint);font-style:italic;padding:.5rem .75rem} .ssr-record-error{color:var(--ssr-danger)} .ssr-map{padding:0;position:relative} .ssr-map-root{width:100%;height:480px;background:var(--ssr-map-bg)} .ssr-map-empty,.ssr-map-error{color:var(--ssr-fg-faint);font-style:italic;padding:.5rem .75rem;text-align:center} .ssr-map-error{color:var(--ssr-danger)} .ssr-form{max-width:420px;margin:1rem auto;background:var(--ssr-surface);border:1px solid var(--ssr-border);border-radius:.5rem;padding:1.25rem 1.5rem} .ssr-form-title{margin:0 0 1rem;font-size:1.25rem;color:var(--ssr-fg)} /* Csali (honeypot) mező: a képernyőről is el kell tűnnie, nem csak a segédeszközök elől (`aria-hidden` + `tabindex=-1` a HTML-ben). NEM `display:none` és nem `visibility:hidden`: azt a botok egy része kifejezetten szűri, a kiemelés viszont minden böngészőben eltünteti. */ .ssr-form-hp{position:absolute;inset-inline-start:-10000px;inline-size:1px;block-size:1px;overflow:hidden} .ssr-form-error{margin:0 0 1rem;padding:.5rem .75rem;background:var(--ssr-danger-bg);border:1px solid var(--ssr-danger-border);border-radius:.3rem;color:var(--ssr-danger);font-size:.9rem} .ssr-form-inner{display:flex;flex-direction:column;gap:.85rem} .ssr-form-field{display:flex;flex-direction:column;gap:.3rem} /* A címke a mezősor ELSŐDLEGES azonosítója — teli szövegszín és félkövér, az SPA `.d-label`-jével azonos szereposztásban. Korábban a leírással közel azonos súlyú és színű volt, így egy bekezdésnyi `description` mellett elveszett. */ .ssr-form-label{font-size:.85rem;font-weight:600;color:var(--ssr-fg)} /* Kötelezőség-jelölés: a form dönti el, MELYIK oldalt jelöljük (`requirementMarking` séma-kulcs) — a kötelezőt csillaggal, vagy csupa-kötelező űrlapon a ritkább, nem kötelező oldalt felirattal. A hordozó `` üresen is a DOM-ban marad (a feltételes kötelezőséget a `form-visibility.js` ide írja), ezért nem foglalhat helyet üresen. */ .ssr-form-requirement:empty{display:none} .ssr-form-required{color:var(--ssr-danger)} .ssr-form-optional{font-weight:400;font-size:.85em;color:var(--ssr-fg-muted)} /* Mező-súgó: a címke és a vezérlő KÖZÖTT áll (a sorrendet a renderelő HTML-je adja, nem ez a szabály). A csoport-leírással azonos vizuális szerep. */ .ssr-form-field-description{margin:0;color:var(--ssr-fg-muted);font-size:.85rem;line-height:1.35} .ssr-form-input{width:100%;padding:.5rem .65rem;border:1px solid var(--ssr-border-input);border-radius:.3rem;font-size:.95rem;color:var(--ssr-fg);background:var(--ssr-surface)} /* A több soros mező (`format: "multiline"`) ugyanazt a doboz-alakot viseli, mint a sima beviteli mező — csak két böngésző-default szorul javításra: a `textarea` alapértelmezett betűtípusa monospace (a lap tipográfiájától elütne), és a vízszintes átméretezés kitörné az űrlap-rácsból. */ textarea.ssr-form-input{font-family:inherit;line-height:1.45;resize:vertical} .ssr-form-input:focus{outline:none;border-color:var(--ssr-accent);box-shadow:0 0 0 2px var(--ssr-accent-soft)} /* Az űrlap gombsora: az elsődleges küldés + a `toolbar` bejegyzései EGY sorban, szűk helyen tördelve. A külső térköz ITT van (nem a gombokon), különben a sorba került elemek margói összeadódnának. */ .ssr-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.35rem} .ssr-form-submit{padding:.6rem 1rem;background:var(--ssr-accent);color:var(--ssr-accent-contrast);border:0;border-radius:.3rem;cursor:pointer;font-size:.95rem;font-weight:500} .ssr-form-submit:hover{background:var(--ssr-accent-hover)} .ssr-form-error-message{margin:0} .ssr-form-error-list{margin:.35rem 0 0;padding-left:1.1rem} .ssr-form-error-list a{color:inherit} .ssr-form-field-error{margin:0;color:var(--ssr-danger);font-size:.85rem} /* Többmezős kérdés KÖZÖS hibája — a fieldset végén, egyszer. Ugyanaz a vizuális szerződés, mint a mező-szintű hibáé; a `grid-column` azért kell, mert a `.ssr-form-group` rács, és a hiba a teljes sort foglalja. */ .ssr-form-group-error{grid-column:1/-1;margin:0;color:var(--ssr-danger);font-size:.85rem} .ssr-form-input[aria-invalid="true"]{border-color:var(--ssr-danger)} /* Az opciólista alapból EGY oszlop (`minmax(100%,1fr)` → egy sáv fér ki), és a csoport `optionMinWidth`-e írja felül: annyi hasábra tördel, ahány ilyen széles opció elfér. Tartalomvezérelt, breakpoint nélkül — ugyanaz az idióma, mint a mezőknél a `--ssr-form-col-min`. A DOM-sorrend az opciók séma- sorrendje marad, tehát a fókusz- és felolvasási sorrend nem változik. */ .ssr-form-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--ssr-option-min,100%),1fr));gap:.3rem} .ssr-form-option{display:flex;align-items:center;gap:.45rem;font-size:.95rem;color:var(--ssr-fg)} .ssr-form-checkbox,.ssr-form-radio{margin:0;accent-color:var(--ssr-accent)} /* `min-inline-size:0`: a `fieldset` natív alapértéke `min-content`, ami a legszélesebb gyerek (pl. egy széles opciótábla) alá NEM enged zsugorodni — a túlcsordulás ilyenkor a dokumentumra szökik, és a belső görgetőburok sosem aktiválódik. A grid-elemként viselkedő gyerekekre ugyanez a `.ssr-option-table-scroll{min-width:0}`-ban él. */ .ssr-form-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--ssr-form-col-min,100%),1fr));gap:.85rem;margin:0;padding:.85rem 1rem 1rem;border:1px solid var(--ssr-border);border-radius:.4rem;min-inline-size:0} .ssr-form-group>legend,.ssr-form-group>.ssr-form-group-description{grid-column:1/-1} /* Teljes soros mező (`fieldGroups[].fullWidthFields`): a csoport rácsában SAJÁT sort kap, nem osztozik oszlopon. Tipikus alakja a jelölőnégyzet- kérdés „Egyéb" részletezője az opció-kártyák után. SZERKEZETI szabály — ezért az SSR-alapstílusban él, nem témában; a DOM- és fókuszsorrend a séma `fields` sorrendje marad, nincs `order`/`nth-child` átrendezés. */ .ssr-form-field--wide{grid-column:1/-1} .ssr-form-group-title{padding:0 .35rem;font-size:.95rem;font-weight:600;color:var(--ssr-fg)} .ssr-form-group-description{margin:0;color:var(--ssr-fg-muted);font-size:.85rem} /* Combo (`id` field-type) — a találati lista a mezőblokk fölé úszik, ezért a burok pozicionált. Minden szín `--ssr-*` tokenből: a témák vezérlik. */ .ssr-lookup{position:relative;display:grid;gap:.3rem} /* A vezérlő-sáv: a beviteli mező, és FÖLÖTTE lebegve a betöltés-jelző meg a törlés-gomb. A jobb oldali belső margó nekik tartja a helyet, hogy ne takarják a beírt szöveget. */ .ssr-lookup-control{position:relative;display:grid} .ssr-lookup-control .ssr-lookup-search{padding-inline-end:4rem} .ssr-lookup-clear,.ssr-lookup-spinner{position:absolute;top:50%;translate:0 -50%} .ssr-lookup-clear[hidden],.ssr-lookup-spinner[hidden]{display:none} .ssr-lookup-clear{inset-inline-end:.4rem;inline-size:1.75rem;block-size:1.75rem;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ssr-fg-muted);font-size:1.15rem;line-height:1;cursor:pointer} .ssr-lookup-clear:hover{background:var(--ssr-accent-soft);color:var(--ssr-fg)} .ssr-lookup-spinner{inset-inline-end:2.3rem;inline-size:1rem;block-size:1rem;border:2px solid var(--ssr-border);border-top-color:var(--ssr-accent);border-radius:50%;animation:ssr-lookup-spin 700ms linear infinite} @keyframes ssr-lookup-spin{to{rotate:360deg}} /* A pörgés puszta dekoráció — mozgás-érzékenyeknél álló korong is jelzi. */ @media (prefers-reduced-motion:reduce){.ssr-lookup-spinner{animation:none}} /* Letiltott mezőn a saját vezérlői sem használhatók. */ .ssr-lookup:has(.ssr-lookup-search:disabled) .ssr-lookup-clear{display:none} .ssr-lookup-results{position:absolute;top:100%;left:0;right:0;z-index:20;display:grid;max-height:18rem;overflow-y:auto;border:1px solid var(--ssr-border-input);border-radius:.4rem;background:var(--ssr-surface);box-shadow:0 .5rem 1.25rem color-mix(in srgb,var(--ssr-fg) 14%,transparent)} .ssr-lookup-results[hidden]{display:none} .ssr-lookup-option{padding:.55rem .7rem;border:0;border-bottom:1px solid var(--ssr-border);background:transparent;color:var(--ssr-fg);font:inherit;line-height:1.4;text-align:left;cursor:pointer} .ssr-lookup-option:last-child{border-bottom:0} .ssr-lookup-option:hover,.ssr-lookup-option-active{background:var(--ssr-accent-soft)} .ssr-lookup-status{margin:0;color:var(--ssr-fg-muted);font-size:.85rem} /* `optionTable` mezőcsoport: sorok a mezők, oszlopok a közös opciókészlet. A sor `` — így a feltételes megjelenítés kliens-szkriptje ugyanúgy kezeli, mint bármely más mezőblokkot. */ /* A SOR mezőblokk IS (a kliens-szkript arra szelektál), de a `.ssr-form-field` flex-oszlopa egy ``-en a cellákat egymás ALÁ tenné — a táblázat- szerepet vissza kell állítani. */ .ssr-option-table tr.ssr-form-field{display:table-row;gap:0} /* A feltételes megjelenítés KONTRAKTUSA a `hidden` attribútum: a szerver- render és a `form-visibility.js` UGYANAZT az attribútumot állítja a mezőblokkon és a csoport-fieldseten. A böngésző UA-szabálya (`[hidden]{display:none}`) viszont csak addig érvényesül, amíg semmi nem ad `display`-t ugyanazon az elemen: a fenti `.ssr-form-field{display:flex}` / `.ssr-form-group{display:grid}` azonos specifikussággal, KÉSŐBB jön, tehát felülírja — a rejtett mező láthatóan ott marad. Ezért minden `display`-t adó keret-szabály mellé kell `[hidden]` őr, a szabály UTÁN. */ .ssr-form-field[hidden],.ssr-form-group[hidden]{display:none} /* DISABLED interakciós állapot — a `hidden` testvére ugyanazon a relevancia- tengelyen: a mező a helyén marad, de nem használható (mező `enabled`, illetve csoport-szintű natív `
`). A jelzés SZERKEZETI, nem mezőnév-alapú: a natív `:disabled` állapotot olvassa, tehát minden mezőtípusra és minden témában ugyanaz. `opacity` szándékosan NINCS a teljes blokkon: az a szöveg kontrasztját kiszámíthatatlanul rontaná — külön token-hármas adja a szürkéket. A jelentést a szín MELLETT a natív állapot és az interakció hiánya is közli. */ .ssr-form-input:disabled{background:var(--ssr-disabled-bg);border-color:var(--ssr-disabled-border);color:var(--ssr-disabled-fg)} .ssr-form-option:has(input:disabled){background:var(--ssr-disabled-bg);border-color:var(--ssr-disabled-border);color:var(--ssr-disabled-fg);cursor:not-allowed} /* A címke és a súgó IS az állapotot közli — nem csak az apró natív vezérlő. A `user-select:none` a DÁP disabled-kontraktusa (a szöveg nem kijelölhető); a readonly ettől KÜLÖN marad: ott az érték olvasható és kijelölhető. */ .ssr-form-field:has(:disabled)>.ssr-form-label, .ssr-form-field:has(:disabled)>.ssr-form-field-description{color:var(--ssr-disabled-fg);user-select:none} .ssr-form-option:has(input:disabled){user-select:none} /* Letiltott csoport: a legend és a csoport-súgó ugyanazt mondja, mint a tagjai. */ .ssr-form-group[disabled]>.ssr-form-group-title, .ssr-form-group[disabled]>.ssr-form-group-description{color:var(--ssr-disabled-fg);user-select:none} /* Hover/focus a letiltott felületen nem gyulladhat ki. */ .ssr-form-option:has(input:disabled):hover, .ssr-form-option:has(input:disabled):focus-within{background:var(--ssr-disabled-bg);border-color:var(--ssr-disabled-border);box-shadow:none} /* A natív jelölő MAGA is szürke: az `accent-color` amúgy a téma kiemelő színét viszi, és egy kék rádiógomb szürke soron félreérthető. */ .ssr-form-checkbox:disabled,.ssr-form-radio:disabled{accent-color:var(--ssr-disabled-fg)} /* Lookup (combobox): a keresőmező letiltásakor a TELJES vezérlő inaktív — a státusz-sor is, és a találati lista nem nyílhat le. A `.ssr-form-input` disabled-szabálya magára a keresőre már érvényes (közös osztály). */ .ssr-lookup:has(.ssr-lookup-search:disabled) .ssr-lookup-status{color:var(--ssr-disabled-fg);user-select:none} .ssr-lookup:has(.ssr-lookup-search:disabled) .ssr-lookup-results{display:none} .ssr-option-table tr.ssr-form-field[hidden]{display:none} /* `table-layout:fixed`: az opció-oszlopok EGYENLŐEN osztoznak a maradékon — különben a leghosszabb fejléc-szöveg magához húzza a helyet. A sor- címke oszlopát NÉVVEL célozzuk (`.ssr-option-table-label`), nem `:first-child`-dal: a jelentés ne a pozícióhoz kötődjön. */ /* SAJÁT GÖRGETŐBUROK. A táblázat a felirataitól szélesebb lehet a viewportnál; burok nélkül a DOKUMENTUMOT tolná ki. `min-width:0` kell, mert a burok grid- elem (`.ssr-form-group{display:grid}`), és a grid-elem alap `min-width:auto` a tartalom minimumára feszülne — épp azt akadályozva meg, hogy a burok zsugorodjon és görgessen. Az `overscroll-behavior-inline:contain` megakadá- lyozza, hogy a tábla végén továbbgörgetve a LAP induljon el. */ /* A `position:relative` NEM dekoráció: a burok így lesz TARTALMAZÓ DOBOZ a benne élő abszolút pozicionált leszármazottaknak (a vizuálisan rejtett cella-feliratok, `.ssr-visually-hidden`). Enélkül a tartalmazó dobozuk egy burkon KÍVÜLI pozicionált ős, és egy görgető doboz csak azt vágja le, aminek a tartalmazó-doboz-lánca rajta megy át — a 319 rejtett felirat így a tábla jobb széléig kitolta az ŐSÖK görgethető területét, és a tábla helyett a LAP lett oldalra húzható. Mérve (2026-08-26, ogyelf4, 390 px): shell `scrollWidth 962 → 364`. */ .ssr-option-table-scroll{position:relative;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain} /* A tapadó fejléc-másolat KONTÉNERE. A másolat a shell tartalom-dobozán belül mozdulhat el, ezért a fejléc a dokumentum-görgetést követi, és a shell alján — vagyis a tábla végén — elenged. A magasságot és a negatív margót a runtime méri rá, hogy a másolat pixelre az eredeti `` fölé kerüljön, layout-hatás nélkül. A shellnek SEMMILYEN saját szabálya nincs (és `position:relative`-t sem kaphat: akkor ő lenne a burokból kiszökő rejtett feliratok tartalmazó doboza, l. `.ssr-option-table-scroll`) — a `data-` jelölés és a doboz-lánc elég. */ /* A `--ssr-top-inset` a nézetablak tetejét foglaló FIX keret-krómot (összecsukó fejléc, l. `ssr-collapsing.js`) méri; enélkül a tapadó fejléc pont MÖGÉ csúszna. Krómot nem tevő lapon a token nincs jelen → a fallback 0. */ /* A sávnak NINCS saját megjelenése (se szín, se sűrűség, se keret): a benne ülő elem az eredeti fejléc KLÓNJA, a tábla osztályaival — a design szabályai változatlanul érvényesek rá. Egy utánzó cella-stílus-család itt azt jelentené, hogy a keret megismétli a téma értékeit, és némán elcsúszik tőlük (mérve: padding, betűvastagság, betűméret és a kártya-ív is eltért). Az `overflow` a vízszintes görgetéskor kilógó klónt vágja. */ .ssr-option-table-sticky{position:sticky;top:var(--ssr-top-inset,0px);z-index:2;overflow:hidden} .ssr-option-table-scroll:focus-visible{outline:2px solid var(--ssr-accent);outline-offset:2px} /* Az olvashatósági minimum TOKENBŐL épül, az oszlopszám pedig a rendereléskor ismert (`--ssr-option-table-cols`) — így a görgetés akkor jelenik meg, ha a tartalom tényleg nem fér el. Nincs viewport-breakpoint és nincs beégetett táblaszélesség: az a kompenzáció, amit ez a szabály kivált. */ .ssr-option-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.95rem; min-width:calc(var(--ssr-option-table-label-min) + var(--ssr-option-table-col-min) * var(--ssr-option-table-cols,1))} .ssr-option-table-label{width:40%} .ssr-option-table th,.ssr-option-table td{padding:.5rem .6rem;border-bottom:1px solid var(--ssr-border);text-align:center} .ssr-option-table thead th{background:var(--ssr-th-bg);color:var(--ssr-th-fg);font-weight:600} .ssr-option-table tbody th{text-align:left;font-weight:600} /* A SAROKCELLA a kérdés szövege — a sor-címke oszlop fejléce, nem opció- címke —, ezért balra zárt, mint alatta a sor-fejlécek. NÉVVEL célozva (`.ssr-option-table-label`), nem `:first-child`-dal. */ .ssr-option-table thead .ssr-option-table-label{text-align:left} .ssr-option-cell{display:flex;align-items:center;justify-content:center;cursor:pointer} /* VIZUÁLISAN rejtett, de az akadálymentességi fában BENNE MARADÓ elem. `display:none` itt hiba lenne — az a képernyőolvasó elől is elvenné. Két fogyasztó, egy deklaráció: - opció-tábla cella-felirata (`field-types`): a jelentést a fejléc-oszlop adja, de a vezérlőnek saját név is kell; - `hideLabel`-es mező `
`-je a `record` nézetben (`ssr-record`): a `
` szerkezete megköveteli a `
`-t, a séma viszont azt kérte, hogy a felirat ne látszódjon. */ .ssr-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* A `format: "email" | "tel"` mező SSR-cellája: a hivatkozás LÁTSZÓDJON is linknek. A színt a téma adja (`--ssr-accent`), a szabály csak strukturális. */ .ssr-cell-link { color: var(--ssr-accent); text-decoration: none; } .ssr-cell-link:hover { text-decoration: underline; } /* SPECIFICITÁS-SZERZŐDÉS: a grid a SOR-kiválasztás cella-linkjeit szín és aláhúzás nélkül rajzolja, és ezt egy elem-szintű szabállyal teszi (`ssr-base.css`: `.ssr-grid-row a{color:inherit;text-decoration:none}`, 0,1,1). Ez a link viszont az ADATÉ, nem a sor-kiválasztásé — a `.ssr-cell-link` önmagában (0,1,0) alulmaradna, ezért kell a sor-kontextusos alak. Ha a `.ssr-grid-row a` valaha megszűnik (a `.ssr-grid-cell-link` óta felesleges), ez a blokk törölhető. */ .ssr-grid-row .ssr-cell-link { color: var(--ssr-accent); text-decoration: none; display: inline; } .ssr-grid-row .ssr-cell-link:hover { text-decoration: underline; } .ssr-file-cell{display:inline-flex;flex-wrap:wrap;gap:.25rem;align-items:center} .ssr-file-thumb{width:64px;height:64px;object-fit:cover;border-radius:.3rem;border:1px solid var(--ssr-border);background:var(--ssr-surface)} .ssr-file-chip{display:inline-block;padding:.1rem .45rem;background:var(--ssr-th-bg);border:1px solid var(--ssr-border);border-radius:.25rem;font-size:.8rem;color:var(--ssr-fg-secondary)} /* Az összecsukó node (`collapsing: true`) MECHANIKA-szabályai. Csak a szkript által felvett osztályokon élnek, tehát a kulcs nélkül inertek. A MEGJELENÉS (kompakt paddingok, zsugorított logó, elrejtett brand-felirat) nem ide tartozik: azt a design-stíluslap írja az `.ssr-collapsing-stuck` osztályra. */ /* Az elem kikerül a folyamból; a helyét a szkript által méretezett `.ssr-collapsing-spacer` tartja — l. az `ssr-collapsing.js` magyarázatát. */ .ssr-collapsing-fixed { position: fixed; top: 0; right: 0; left: 0; z-index: 900; } /* NO-JS (és szkript-indulás előtti) fallback: a gyökér-layout felső régiója egyszerűen ragad, amíg a szkript át nem vette a fejlécet. A szabály a RÉGIÓRA szól, nem a wrapperre: egy `position: sticky` elem a szülője tartalom-dobozán belül tud csak elmozdulni, a wrapper szülője pedig épp a fejléc-magasságú régió — ott nulla a mozgástér. A `:has()` a keret két saját kontraktusát köti össze (régió-osztály + a `collapsing` kulcs wrappere), projekt-tudás nélkül. A szkript indulása után a szelektor megszűnik illeszkedni, és a fixed+spacer mechanika él — a kettő nem versenyez. */ body > .ssr-layout > .ssr-layout-top:has( .ssr-collapsing:not(.ssr-collapsing-fixed) ) { position: sticky; top: 0; z-index: 900; } .ssr-collapsing-sentinel { position: absolute; top: 0; left: 0; width: 1px; visibility: hidden; pointer-events: none; } /* Az SSR-menü ikon-slotja. A séma `icon` slotjába tett node-okat (tipikusan `image`) a renderelő ide teszi — ez a szabály CSAK méretez, hogy az ikon a felirat magasságához igazodjon és ne tolja szét a sort. A festés szándékosan NEM keret-döntés: az ikon lehet vonalas egyszínű vagy teljes színű logó, és ezt csak a design tudja. Vonalas ikonoknál az aktív (inverz) menüelemen jellemzően átszínezés kell, pl.: .ssr-nav-item-active .ssr-nav-item-icon img { filter: brightness(0) invert(1); } Ikon nélküli menüelemre a konténer sem kerül ki, tehát nincs üres hely. */ .ssr-nav-item-icon { flex: 0 0 auto; display: inline-flex; align-items: center; height: 1.25em; } /* A méretezés a konténeré: az ikon a felirat magasságához igazodik. Az `image` node alapszabályai (`.ssr-image`) `:where()`-ben ülnek, tehát nulla specificitásúak — ez a szabály egyetlen osztállyal is nyer, a komponensek betöltési sorrendjétől függetlenül. */ .ssr-nav-item-icon > * { display: block; width: auto; height: 100%; } /* Ikon + felirat egy sorban — csak az ikonos elemeken, hogy az ikon nélküli menük alap `inline-block` megjelenése (padding, kapszula) ne változzon. A `:where()` NEM dekoráció: nullázza a `:has()` specificitását, így a szabály `.ssr-nav-item` erősségű marad, és a később betöltött projekt-stíluslap egyszerű osztály-szelektorral felülírhatja (pl. más `gap` vagy `display`). Enélkül a keret-szabály (0,2,0) legyőzné a projekt `.ssr-nav-item`-jét (0,1,0) — épp a fordítottja a szándéknak. */ .ssr-nav-item:where(:has(.ssr-nav-item-icon)) { display: inline-flex; align-items: center; gap: 0.4em; } /* ── Mobil menü ───────────────────────────────────────────────────────────── A SPA-oldali `design-vanilla/mobile-adapt.ts` párja, de JS NÉLKÜL: ott egy after-hook injektál gombot és `.d-nav-mobile-open` osztályt kapcsol, itt a rejtett checkbox állapotát olvassuk `:has()`-szal. Ezért a menü akkor is nyitható, ha a JavaScript nem fut le — SSR-en ez a lényeg. Desktopon a kapcsoló és a háttér-réteg rejtve; a töréspont fölött a menü a megszokott vízszintes sáv. A méretezést/színezést a design felülírhatja: itt csak a MŰKÖDÉSHEZ szükséges szabályok élnek. */ .ssr-nav-toggle, .ssr-nav-burger, .ssr-nav-backdrop { display: none; } /* A `grid` SSR view strukturális stílusai. A TÉMÁZÁS (szín, betű, keret) a design-csomagé; itt csak az él, ami a működéshez kell. */ /* Sor-kiválasztás JS NÉLKÜL: minden cella egy ``-t tartalmaz ugyanarra a `?selected=ID` URL-re. Hogy a TELJES sor kattintható legyen, a cella paddingját maga a link viseli, és kitölti a cella magasságát. A `height: 1px` a cellán ismert táblázat-trükk: a `height: 100%` csak akkor oldódik fel a TÉNYLEGES (sorhoz nyújtott) magasságra, ha a cellának van definit magassága. Mérve: enélkül a linkek a cella magasságának 22–84%-át fedték csak, ezért kellett a projekteknek JS-ből sor-kattintást kötniük — az pedig a generált URL-t fejtette vissza string-mintával (`a[href*="selected="]`), ami a keret renderelt kimenetére épít (l. AGENTS.md). */ .ssr-grid-table tbody td:has(> .ssr-grid-cell-link) { height: 1px; padding: 0; } /* A padding TOKENBŐL jön, nem beégetve. Ez a szabály erősebb szelektoron ül (`td:has(> .ssr-grid-cell-link)` nullázza a cella paddingját), mint egy projekt `.ssr-grid-table td { padding }` felülírása — beégetett értékkel tehát a projekt a fejléc-cellát átállítaná, a törzset viszont nem, és a kettő elcsúszna. Mérve (2026-07-31, `szures`): 22,6 px vs. 18,6 px szövegkezdet. */ .ssr-grid-cell-link { display: block; box-sizing: border-box; height: 100%; padding: var(--ssr-grid-cell-padding-y, 0.45rem) var(--ssr-grid-cell-padding-x, 0.6rem); color: inherit; text-decoration: none; } /* Vízszintes húzás-görgetés (l. `drag-scroll.js`). A konténer a `[data-drag-scroll]` attribútummal jelöli magát; a görgetés natívan is megy (shift+kerék, érintés), a húzás az egérrel dolgozóknak ad hozzáférést. */ .ssr-grid-scroll { overflow-x: auto; } .ssr-grid-scroll.is-drag-scrolling { cursor: grabbing; user-select: none; } /* Az SSR-térkép marker-popupja. A markup a `popup-markup.ts`-é (SPA-val közös), a megjelenés viszont ITT él — a SPA-oldali `.d-map-popup*` szabályokat a `design-vanilla` adja, amit egy publikus SSR-oldal nem tölt be. Enélkül a popup kinézete a projektre hárul: a `szures` publikus oldala pontosan ezért hordozott saját `.d-map-popup*` + `.gm-style` szabályokat. A színek az SSR-token-készletből jönnek (`--ssr-fg`, `--ssr-surface`, `--ssr-accent`, …), tehát a popup követi az oldal témáját; a fallback-értékek csak akkor élnek, ha a projekt nem regisztrált SSR-designt. A Google InfoWindow-chrome (`.gm-style-iw-*`) szabályai is ide tartoznak: a kártya-design FELTÉTELEZI őket (a bezáró gomb a jobb felső sarokba kerül, ezért a fejléc jobb oldali paddingje; a Google wrapper saját paddingjét és görgető-dobozát semlegesítjük). Ha csak a kártya-szabályok érkeznének a kerettel, minden projektnek újra kellene írnia a chrome-részt. */ .d-map-popup { /* A szélesség viewporthoz kötött: keskeny mobil-sávban a `17rem` minimum különben szélesebb lenne a látható térképnél, és a buborék kilógna. */ min-width: min(17rem, calc(100vw - 4rem)); max-width: min(24rem, calc(100vw - 4rem)); /* A GÖRGETŐ-DOBOZ: hosszú (vagy cluster-nyi) tartalomnál a buborék nem nő a látható térképen túl — a görgetés ITT történik, l. a `.gm-style-iw-d`-t. Ugyanaz a szerződés, mint a SPA-oldalon (`vanilla-map.css`). */ max-height: min(60vh, 28rem); overflow-x: hidden; overflow-y: auto; /* Szóköz nélküli hosszú érték (URL, e-mail, azonosító) a buborék határán törik — generikusan a tartalmon, nem mező- vagy típus-függő ágon. */ overflow-wrap: anywhere; /* A wrapper paddingjét a `.gm-style-iw-c` szabály nullázza; a kártya adja. */ padding: 0; color: var(--ssr-fg); font-size: 0.9rem; line-height: 1.4; } .d-map-popup-card { display: flex; flex-direction: column; gap: 0; overflow: hidden; border: 1px solid var(--ssr-border); border-radius: 14px; background: var(--ssr-surface); box-shadow: 0 2px 8px rgba(0, 87, 142, 0.08); } /* Cluster (több co-located rekord egy markeren): a kártyák elkülönülnek. */ .d-map-popup-card + .d-map-popup-card { margin-top: 0.4rem; } /* Fejléc-sáv. A jobb oldali padding a Google bezáró-gombjának helye — l. a `.gm-style-iw-chr` pozicionálását lent. */ .d-map-popup-title { padding: 0.75rem 2.75rem 0.75rem 0.85rem; border-bottom: 1px solid var(--ssr-border); background: var(--ssr-accent-soft); color: var(--ssr-accent); font-size: 1.05rem; font-weight: 700; line-height: 1.25; } /* Címke/érték párok egymás alatt — l. a `popup-markup.ts` fej-magyarázatát. */ .d-map-popup-subtitle { display: flex; flex-direction: column; gap: 0; padding: 0.65rem 0.85rem 0.75rem; color: var(--ssr-fg-muted); } .d-map-popup-detail { padding: 0.35rem 0; } .d-map-popup-detail + .d-map-popup-detail { border-top: 1px solid var(--ssr-border-light); } .d-map-popup-detail-label { margin-right: 0.35rem; color: var(--ssr-accent); font-weight: 600; } /* A régi projekt-szkript `"Címke: "` alakot írt; a kettőspont megjelenítési konvenció, ezért CSS-ből jön — a markup a puszta címkét hordozza. */ .d-map-popup-detail-label::after { content: ":"; } .d-map-popup-desc { padding: 0 0.85rem 0.75rem; color: var(--ssr-fg); } /* ── Google InfoWindow-chrome ───────────────────────────────────────────── A `!important`-ok a Google inline/SDK-stílusai ellen kellenek. */ .gm-style .gm-style-iw-c { padding: 0 !important; border-radius: 16px !important; background: var(--ssr-bg); box-shadow: 0 8px 24px rgba(23, 74, 104, 0.2) !important; } /* EGYETLEN GÖRGETŐ-TULAJDONOS: a Google tartalom-doboza nem korlátoz és nem görget (a saját `max-height`-jét a SDK inline írja), a görgetés kizárólag a keret-tulajdonú `.d-map-popup`-on történik. A `hidden` így nem vág: a popup maga már a viewporthoz méretezett. Két scrollbar egymásban a régi tünet. */ .gm-style .gm-style-iw-d { max-height: none !important; overflow: hidden !important; } .gm-style .gm-style-iw-chr { position: absolute; top: 0.45rem; right: 0.45rem; z-index: 1; height: 1.75rem; } .gm-style .gm-style-iw-chr > button.gm-ui-hover-effect { display: grid !important; width: 1.75rem !important; height: 1.75rem !important; padding: 0 !important; place-items: center; border-radius: 50%; color: var(--ssr-accent); opacity: 1 !important; } .gm-style .gm-style-iw-chr > button.gm-ui-hover-effect:hover { background: rgba(0, 87, 142, 0.07) !important; } /* A Google alap-ikonja egy háttérképes ``; azt rejtjük, és tipográfiai „×"-et rajzolunk helyette — élesebb, és a témával egy színű. */ .gm-style .gm-style-iw-chr > button.gm-ui-hover-effect::before { content: "×"; font-size: 1.25rem; font-weight: 300; line-height: 1; } .gm-style .gm-style-iw-chr > button.gm-ui-hover-effect > span { display: none !important; } /* Visszaállító link a térkép fölött (csak kiválasztott rekordnál). A pozíciót a `.ssr-map` adja; a megjelenést a design szabja. */ .ssr-map { position: relative; } .ssr-map-reset { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1; padding: 0.45rem 0.8rem; border: 1px solid var(--ssr-border); border-radius: 8px; background: var(--ssr-bg); color: var(--ssr-accent); font-size: 0.85rem; font-weight: 600; text-decoration: none; } /* A `text` SSR view-node strukturális stílusai. Miért kell egyáltalán: a node `level` megadásakor VALÓDI címsort rendel (`

`…`

`), hogy a dokumentum-vázlatot a keret adja, ne a séma nyers HTML-je. A böngésző alapértelmezése viszont a címsorokra saját `margin`-t és `font-size`-ot tesz, ami szintenként ugrál — vagyis a `level` megválasztása (szemantikai döntés) némán MEGJELENÉST is változtatott. Emiatt a projekteknek `margin: 0`-val és `font-weight: inherit`-tel kellett takarítaniuk utána. A reset ezt szétválasztja: a `level` a dokumentum-vázlatot határozza meg, a méretet és a súlyt a tokenek. Aki szintenként eltérő méretet akar, a saját designjában `h1.ssr-text-title { … }`-gyel megteszi. */ /* TISZTA reset: a `.ssr-text-title` önmagában NEM címsor-megjelenés. A `level` nélküli `text` node `
`-et rendel (pl. a lábléc copyright-sora) — annak a törzsszöveggel kell egyeznie. Ha ez a szabály méretet/súlyt ÍRNA elő, minden ilyen node címsorrá hízna; pontosan ez történt 2026-07-31-en a lábléccel. */ .ssr-text-title { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; } .ssr-text-subtitle { margin: 0.25rem 0 0; color: var(--ssr-fg-muted); font-size: 0.9rem; } .ssr-carousel{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;border-radius:.4rem;background:var(--ssr-surface);margin:0 0 1rem} .ssr-carousel-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0} .ssr-carousel-slide.ssr-carousel-static{opacity:1} .ssr-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem;margin:0 0 1rem} .ssr-gallery-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.3rem;display:block} .ssr-media-empty{color:var(--ssr-fg-faint);font-style:italic;padding:.75rem 0} .ssr-media-error{color:var(--ssr-danger);font-style:italic;padding:.75rem 0} /* Egyetlen, sémában deklarált kép (`image` node). A MÉRETET a design vagy a befoglaló komponens szabja; a `width`/`height` attribútum a layout-shift elkerülését szolgálja. `:where()` — NULLA specificitás, szándékosan. Ez a két deklaráció csak annyit véd, hogy egy méretezetlen kép ne törje el az elrendezést; MINDEN olyan szabálynak engednie kell, ami a képet egy konténer méretéhez igazítja. Egyosztályos alakban (0,1,0) viszont ugyanolyan erős, mint a konténerek szabályai, tehát a komponensek BETÖLTÉSI SORRENDJE döntött — ami nem szerződés. Kétszer okozott láthatatlan ikont: a menüben (2026-07-31) és a toolbaron (ugyanaznap, ugyanaz a hiba). A `:where()` a gyökérok: a konténer mostantól mindig nyer, egyetlen osztállyal is. */ :where(.ssr-image) { max-width: 100%; height: auto; } .ssr-image-link { display: inline-flex; } /* A `cards` SSR view strukturális stílusai. A TÉMÁZÁS (szín, betű, keret) a design-csomagé; itt csak az él, ami a működéshez kell. A kártya-VÁZ (`.ssr-card`, `.ssr-card-field`, …) történetileg a `component-ssr` alaplapjában van; az ITT bevezetett két új szerep viszont a tulajdonos komponens saját lapjába kerül. */ /* A kártya TÖRZSE: a mező-sorok stabil befoglalója, függetlenül attól, hogy a felület kattintható-e. A téma ezen állítja a törzs elrendezését (maradék hely, vágás, halványodó sáv); a kiválasztás-link ezen BELÜL él, tehát egy `select` gombot deklaráló kártya — ahol a link-burok elmarad — ugyanúgy néz ki. A keret maga nem ad neki megjelenést: a `.ssr-card-field` sorok a törzsben ugyanúgy folynak, mint korábban közvetlenül a kártyában. */ /* Kiválasztás JS NÉLKÜL: a kártya mező-sorai egy ``-ban ülnek ugyanarra a `?=` URL-re. A link BLOKK, hogy a teljes sávja kattintható legyen, és nem visz link-színt/aláhúzást: a kattintható felület maga a kártya, nem egy benne lévő hivatkozás-szöveg. */ .ssr-card-link { display: block; color: inherit; text-decoration: none; } /* A kattintható felület a TELJES kártya. A link magukat a sorokat fogja körbe (onnan kapja az akadálymentes nevét), a kártya PADDINGJA és a rácsban azonos magasságúra nyújtott kártyák alsó, üres sávja viszont kívül esne rajta — mérve: a szöveg alatti területre kattintva nem történt kiválasztás. A takaró réteg ezt a maradékot is a linkhez csatolja, a DOM megbolygatása nélkül. A `.ssr-card` `position: relative` a takaró viszonyítási kerete; a kártya SAJÁT hivatkozásai (interaktív cella, rekord-gombsor) fölé kerülnek, különben a takaró elnyelné a kattintást. */ .ssr-card { position: relative; } .ssr-card-link::after { content: ""; position: absolute; inset: 0; } .ssr-card-field-interactive, .ssr-card .ssr-toolbar { position: relative; z-index: 1; } /* A rekord-gombsor a kártya LÁBÁBAN áll, a saját sorában: a kiválasztás link-burkával ellentétben ezek LÁTHATÓ vezérlők — a felirat mondja meg, mit csinálnak —, ezért a keret közös gomb-megjelenését viselik (`.ssr-toolbar-btn`, `ssr-base.css`), és a design ugyanazokon a fogantyúkon témázza őket, mint a lap többi gombját. MIÉRT NEM link-kinézet, mint a grid részletek-cellájában: ott a gombsor egy szűk, jobbra zárt oszlop vége, itt a kártya lezárása — a kártyán a művelet a fő affordancia, és jellemzően több is van belőle egymás mellett. */ .ssr-card .ssr-toolbar { margin-top: 0.75rem; } /* A kártya gombjai EGYFORMÁN osztoznak a szélességen: egy kártya a rácsban fix szélességű doboz, ahol a különböző hosszúságú feliratok egyébként különböző méretű gombokat adnának — a látogató pedig a kártyák között hasonlítja őket össze. Egy gombnál ez a régi, teljes szélességű akció-gombbal egyezik. */ .ssr-card .ssr-toolbar-btn { flex: 1 1 auto; } /* A fókusz LÁTHATÓ marad — a kártyák között billentyűzettel is lehet lépkedni, és a kiválasztás enter-rel megy. */ .ssr-card-link:focus-visible { outline: 2px solid var(--ssr-accent); outline-offset: 2px; } /* A kiválasztott kártya ugyanazt a token-értéket viseli, mint a kiválasztott grid-sor (`--ssr-row-selected`), plusz akcentus-keretet: kártyáknál a puszta háttérváltás egy rácsban gyengén olvasható jelzés. */ .ssr-card-selected { background: var(--ssr-row-selected); border-color: var(--ssr-accent); } /* A kártya CÍMSORA (`titleField`). A szerep SZEMANTIKAI: `

` elem, hogy a képernyőolvasó heading-listájában bejárható legyen, és hogy a kártya kattintható linkje a nevéből kapja az akadálymentes nevét. A MEGJELENÉS viszont szándékosan VÁLTOZATLAN: a böngésző `

`-re adott saját margóját és méretét nullázzuk, minden érték öröklődik. Egy új heading ELEM nem rendezheti át senki meglévő kártyáit — a kiemelés a projekt témájáé (a mező `data-field` horgonyán át), nem a kereté. */ .ssr-card-heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; } /* A süti-sáv SAJÁT palettát olvas (`--ssr-banner-*`), nem a navigációét. 2026-08-04-ig a NAV tokenjeit használta (`--ssr-nav-bg` / `-fg` / `-item-fg`) — puszta hasonlóság alapján, hisz mindkettő teljes szélességű, kontrasztos sáv. A kettős tulajdonlás viszont eltérítette a nav-tokent: az `nngyk` témában a `--ssr-nav-bg` értéke már a SÜTI-SÁV szürkéje volt, a fehér nav-felületet pedig a téma stíluslapból kellett felülírnia. Két szemantika, két token — a téma mindkettőt szabadon állítja. */ .ssr-cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.75rem 1rem;background:var(--ssr-banner-bg);color:var(--ssr-banner-fg);box-shadow:0 -2px 8px rgba(0,0,0,.2)} .ssr-cookie-consent[hidden]{display:none} .ssr-cookie-consent-text{flex:1;min-width:200px;font-size:.9rem;line-height:1.4} .ssr-cookie-consent-link{color:var(--ssr-banner-link-fg);text-decoration:underline} .ssr-cookie-consent-accept{padding:.5rem 1rem;background:var(--ssr-accent);color:var(--ssr-accent-contrast);border:0;border-radius:.3rem;cursor:pointer;font-size:.9rem;font-weight:500} .ssr-cookie-consent-accept:hover{background:var(--ssr-accent-hover)} /* A menü MOBIL blokkja — SABLON, nem közvetlenül betöltött stíluslap. A `vanilla-menu.ssr.ts` tölti be és helyettesíti a két helyőrzőt: 979 a séma `mobileBreakpoint` értéke (alap: 768) [data-mobile-breakpoint="979"] a menüt azonosító attribútum-szelektor Miért sablon: a `@media` lekérdezés NEM fogad CSS custom propertyt, tehát a töréspont nem lehet token. Emiatt volt a keret 768px-e beégetve, miközben a `szures` drawere 979px-ig szólt — 769 és 979 között a menüpontok rejtve voltak, de a hamburger még nem jelent meg: a menü NEM VOLT MEGNYITHATÓ. (Mérve 2026-07-31, 850px szélességen.) A `:where([data-mobile-breakpoint="979"])` NEM ad specificitást — a hatókör így elválasztja a különböző törésponttal futó menüket egymástól, de a design felülírási lehetőségét (l. lent a `:where()`-magyarázatokat) érintetlenül hagyja. */ @media (max-width: 979px) { /* A checkbox fókuszálható marad (Space/Enter natívan kapcsol), de nem látszik — a látható vezérlő a `