node-red-contrib-uibuilder/front-end/uib-brand.min.css.map

Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.

{"version":3,"sourceRoot":null,"mappings":"AA0CA,iwOAAA,mCAAA,sEAkWA,oCACI,8FAAA,mCAAA,2DAKJ,mCACI,6bAAA,mCAAA,2DAoBJ,ygBAAA,mCAAA,+DA0BA,wDAIA,wEAIA,8DAIA,8DAIA,8DAIA,8DAIA,8DAIA,qCAGA,0EAIA,0FAIA,gFAIA,gGAIA,sFAIA,8GAIA,+FAIA,+HAIA,oEAIA,0EASA,uCAIA,wEAIA,uCACI,kEAKJ,oHAOA,sIAOA,0EAIA,iCAGA,8IAQA,iIAMA,iFAIA,6aAAA,+XAqBA,wIAGA,sHAGA,2EAKA,gDAGA,sNAUA,8JASI,0CAIJ,yFAMA,8DAIA,gMAQA,0HAKA,+HAMA,yJAMA,gCAIA,sBAKA,sCAGA,qCAGA,uBAIA,4EAME,gCAGA,wCAKA,8DAMA,sCAQF,kIAOA,mGAQA,kFAKA,yJAQA,kDAIA,yGAMA,yCAKA,sEASA,6LAcA,2CAIA,8EAQA,iJAOA,kIAKA,wFAIA,oDAGA,6DAKA,wCAIA,+CAIA,sCAGA,uDAIA,wCAIA,0BACI,qCAIA,6CAGA,sCAQJ,uGAMA,4BAGA,wIAKA,yKASA,kEAKA,yDAOA,uJAeA,+EAQA,2EAKA,yGAQA,6CAIA,qIAWA,iEAIA,oHAOA,yBACI,+BAGA,2RAeA,8DAIA,kDAQJ,kHAKA,8FAKA,gGAKA,sFASA,mEAGA,iCAMA,+HAOA,oFAKA,yDAIA,qEAMA,yDAKA,6EAOA,sCAIA,sBAIA,8BAGA,gCAKA,oCAGA,mDAGA,2DACI,mDAGA,qCAgBJ,2GAOA,uHAQA,+BAIA,0EAMA,oCAQA,4JAeA,6WAgBA,0WAiBA,8HAOA,4BAGA,uBAsCA,oPASA,iCAGA,iEAKA,qHAUA,6BAIA,6EAKA,6EAMA,6EAKA,qHAMA,6BAIA,iDASA,qCAGA,yEAKA,gDAGA,2CAIA,gQAaA,qCACA,wCACA,wCACA,yCACA,sCACA,2CAKA,+RAgBA,qNASA,8DAMA,kCAIA,uDAKA,+KAWA","sources":["front-end/uib-brand.css"],"sourcesContent":["/** Default Styles for uibuilder - Light & Dark options ...\n *\n * TODO: Add darker/lighter shades for variant colours for headers, etc.\n *       Remove shadows for dark mode.\n *\n * 1em ~= 16px\n * Recommended @media breakpoints:\n * Tablet:        48em @ 16pt   = 768px\n * Tablet Wide:   62em @ 16pt   = 992px\n *\n * Mobile Small:  30em @ 16pt   = 480px\n * Mobile Medium: 37.5em @ 16pt = 600px\n * Mobile Large:  48em @ 16pt   = 768px\n *\n * https://css-tricks.com/a-complete-guide-to-custom-properties/ for details on using custom css properties\n * https://una.im/css-color-theming/ for more on color theory calculations\n * https://web.dev/building-a-color-scheme/ is the basis for this style\n * https://unifyned.com/colors.html extends the above\n * https://chromatichq.com/insights/understanding-and-using-hsl-your-css gives calculations for the color wheel\n *\n * NB: The version is updated automatically by the build process to the current date - see gulpfile.js\n * @version: 2026-06-12\n * @author: Julian Knight (TotallyInformation)\n * @license: Apache 2.0\n * @created: 2022-05-02\n *\n * USAGE:\n * - https://totallyinformation.github.io/node-red-contrib-uibuilder/#/client-docs/uib-brand-css\n * - Reference directly or via import in own CSS\n * - Will auto pick up browser preference for light/dark if set\n * - Or manually set with `class=\"light\"` or `class=\"dark\"` on the html tag\n * - Or create a manual switcher feature - see css-test.html or brand-test.html for examples\n * - A simple CSS reset is provided to get reasonably looking HTML in any browser\n * - Some special classes are provided - see the \"Recommended surfaces\" section\n * - Lots of css variables provided for use in your own CSS or in web components\n * NOTES:\n * - Watch out for the order of loading of style sheets!\n * - uibuilder attempts to auto-load this sheet BUT you may need to do it manually to get the right order.\n * - Include in your index.css file as `@import url(\"./uib-brand.min.css\");`\n */\n\n/* :root applies to everything, :root.light is for manually selected light mode */\n:root, :root.light {\n    color-scheme: light dark;\n    --mode: light;\n\n    /* Create a checkable var - helps web components know if this stylesheet is loaded\n     * Use this from general code: \n     *    window.getComputedStyle(document.documentElement, null).getPropertyValue('--uib-css') === 'uib-brand'\n     * Or this from within the component code:\n     *    window.getComputedStyle(this, null).getPropertyValue('--uib-css') === 'uib-brand'\n     * NOTE: no space between : and text!\n     */\n    --uib-css: uib-brand;\n\n    /* For nicer emoji's use this as the font-family */\n    --emoji-fonts: \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\", \"Twemoji Mozilla\", \"EmojiOne Color\", \"Android Emoji\";\n\n    /* Sans-serif is much easier to read on-screen */\n    /* Update 2025-04-28 to use https://github.com/system-fonts/modern-font-stacks - incl better emoji's as well */\n    --font-family: system-ui, sans-serif, var(--emoji-fonts);\n    --code-font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace, var(--emoji-fonts);\n    --cursive-font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive, var(--emoji-fonts);\n\n    --base-margin: 1rem;\n    --max-width: 64rem;\n\n    --border-radius: 0.5rem; /*8px;*/\n    --border-pad: 0.5rem;\n    --border-margin: 0;\n\n    /* For the .grid-fit class, the minimum child element size */\n    --grid-fit-min: 15rem;\n\n    /* For the show/hide elements in PWA mode */\n    --pwa-display-mode: block;\n\n    /* #region Fix link colours when using dark mode in a light mode browser and visa versa */\n    --a-link: blue;\n    --a-visited: purple;\n    --a-hover: red; /* Hover state (must be after link/visited) Hover doesn't seem to be defined in Chromium */\n    --a-active: orange; /* Active state (must be after hover) This is when you hold mouse down on the link */\n    /* #endregion --- Fix link colours --- */\n\n    /* #region --- Colour Prep --- */\n    --brand-hue: 200;\n    --text-hue: var(--brand-hue);\n    --surface-hue: var(--brand-hue);\n    --complementary-offset: 180;\n    --accent-offset: 30; /* 30=Split complementary, 60=Triadic */\n\n    --saturation-bias: 0;\n    --light-saturation: .66;\n    --dark-saturation: calc(var(--light-saturation) * .6);\n    --saturation-value: var(--light-saturation);\n    --saturation: calc(var(--saturation-value) + var(--saturation-bias));\n\n    --lightness-bias: 0;\n    --light-lightness: .57;\n    --dark-lightness: calc(var(--light-lightness) * .75);\n    --lightness-value: var(--light-lightness);\n    --lightness: calc(var(--lightness-value) + var(--lightness-bias));\n    /* #endregion --- Colour Prep --- */\n\n    /* #region --- Brand --- */\n    --brand: hsl(\n        var(--brand-hue)\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    /*#endregion --- Brand --- */\n\n    /* #region --- Shadows https://shadows.brumm.af/ --- */\n    --surface-shadow-light: var(--brand-hue) 10% 20%;\n    --shadow-strength-light: .02;\n\n    --surface-shadow-dark: var(--brand-hue) 30% 30%;\n    --shadow-strength-dark: .1;\n\n    --surface-shadow: var(--surface-shadow-light);\n    --shadow-strength: var(--shadow-strength-light);\n\n    --shadow1:\n        0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),\n        0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),\n        0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),\n        0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),\n        0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),\n        0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))\n    ;\n\n    --shadow2: \n        0.2px 0.3px 0.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .031)),\n        0.5px 0.7px 0.7px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .053)),\n        1px 1.3px 1.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .07)),\n        1.8px 2.2px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .087)),\n        3.3px 4.2px 4.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .109)),\n        8px 10px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .16))\n    ;\n\n    --shadow: var(--shadow1);\n    --btn-shadow: inset 2px 2px 3px rgba(255,255,255, .3),\n                  inset -2px -2px 3px rgba(0,0,0, .3);\n  \n    /*#endregion --- --- */\n\n    /* #region --- Text --- */\n    --text-saturation: .2;\n    --text-bias: 0;\n    --light-text-lightness: .1;\n    --light-text-factor: 1;\n    --dark-text-lightness: .9;\n    --dark-text-factor: -1;\n\n    --text-factor: var(--light-text-factor);\n    --text-lightness: var(--light-text-lightness);\n\n    --text1: hsl(\n        var(--text-hue)\n        calc(100% * var(--text-saturation))\n        calc(\n            100% * (var(--text-lightness)\n            - (var(--text-factor) * var(--text-bias)))\n        )\n    );\n    --text2: hsl(\n        var(--text-hue)\n        calc(100% * (var(--text-saturation) / 2))\n        calc(\n            100% * (var(--text-lightness)\n            + (1 * var(--text-factor) * .1)\n            - (var(--text-factor) * var(--text-bias)))\n        )\n    );\n    --text3: hsl(\n        var(--text-hue)\n        calc(100% * (var(--text-saturation) / 2))\n        calc(\n            100% * (var(--text-lightness)\n            + (1 * var(--text-factor) * .4)\n            - (var(--text-factor) * var(--text-bias)))\n        )\n    );\n    --text4: hsl(\n        var(--text-hue) \n        10% \n        calc(\n            50% \n            - (100% * var(--text-factor) * var(--text-bias)))\n        / calc(25% + (100% * var(--text-bias)))\n    );\n    /*#endregion --- --- */\n\n    /* #region --- Surfaces --- */\n    --surfaces-saturation: .1;\n    --surfaces-bias: 0;\n    --light-surfaces-lightness: .95;\n    --light-surfaces-factor: 1;\n    --dark-surfaces-lightness: .1;\n    --dark-surfaces-factor: -1;\n\n    --surfaces-factor: var(--light-surfaces-factor);\n    --surfaces-lightness: var(--light-surfaces-lightness);\n    \n    --surface1: hsl(\n        var(--surface-hue)\n        calc(100% * var(--surfaces-saturation))\n        calc(\n            100% * (var(--surfaces-lightness)\n            - (var(--surfaces-factor) * .00)\n            + (var(--surfaces-factor) * var(--surfaces-bias)))\n        )\n    );\n    --surface2: hsl(\n        var(--surface-hue)\n        calc(100% * var(--surfaces-saturation))\n        calc(\n            100% * (var(--surfaces-lightness)\n            - (var(--surfaces-factor) * .05)\n            + (var(--surfaces-factor) * var(--surfaces-bias)))\n        )\n    );\n    --surface3: hsl(\n        var(--surface-hue)\n        calc(100% * var(--surfaces-saturation))\n        calc(\n            100% * (var(--surfaces-lightness)\n            - (var(--surfaces-factor) * .10)\n            + (var(--surfaces-factor) * var(--surfaces-bias)))\n        )\n    );\n    --surface4: hsl(\n        var(--surface-hue)\n        calc(100% * var(--surfaces-saturation))\n        calc(\n            100% * (var(--surfaces-lightness)\n            - (var(--surfaces-factor) * .15)\n            + (var(--surfaces-factor) * var(--surfaces-bias)))\n        )\n    );\n    --surface5: hsl(\n        var(--surface-hue)\n        calc(100% * var(--surfaces-saturation))\n        calc(\n            100% * (var(--surfaces-lightness)\n            - (var(--surfaces-factor) * .20)\n            + (var(--surfaces-factor) * var(--surfaces-bias)))\n        )\n    );\n    /*#endregion --- --- */\n\n    /* #region === INFO === */\n    --info-hue: 203;\n    --info-saturation-bias: 0;\n    --info-lightness-bias: 0;\n    \n    --info-hsl: var(--info-hue)\n                calc(100% * (var(--saturation) + var(--info-saturation-bias)))\n                calc(100% * (var(--lightness) + var(--info-lightness-bias)));\n\n    --info: hsl( var(--info-hsl) );\n    --info-intense: hsl(\n        var(--info-hue) 100% 50%\n    );\n    /*#endregion --- --- */\n    \n    /* #region === SUCCESS === */\n    --success-hue: 120;\n    --success-saturation-bias: 0;\n    --success-lightness-bias: 0;\n    \n    --success: hsl(\n        var(--success-hue)\n        calc(100% * (var(--saturation) + var(--success-saturation-bias)))\n        calc(100% * (var(--lightness) + var(--success-lightness-bias)))\n    );\n    --success-intense: hsl(\n        var(--success-hue) 100% 50%\n    );\n    /*#endregion --- --- */\n    \n    /* #region === WARNING === */\n    --warning-hue: 40;\n    --warning-saturation-bias: 0;\n    --warning-lightness-bias: 0;\n    \n    --warning: hsl(\n        var(--warning-hue)\n        calc(100% * (var(--saturation) + var(--warning-saturation-bias)))\n        calc(100% * (var(--lightness) + var(--warning-lightness-bias)))\n    );\n    --warning-intense: hsl(\n        var(--warning-hue) 100% 50%\n    );\n    --warn: var(--warning);\n    /*#endregion --- --- */\n    \n    /* #region === FAILURE === */\n    --failure-hue: 2;\n    --failure-saturation-bias: 0;\n    --failure-lightness-bias: 0;\n    \n    --failure: hsl(\n        var(--failure-hue)\n        calc(100% * (var(--saturation) + var(--failure-saturation-bias)))\n        calc(100% * (var(--lightness) + var(--failure-lightness-bias)))\n    );\n    --failure-intense: hsl(\n        var(--failure-hue) 100% 50%\n    );\n    --error: var(--failure);\n    --danger: var(--failure);\n    /*#endregion --- --- */\n    \n    /* #region === Complementary ACCENT === */\n    --complementary-hue: calc(var(--brand-hue) + var(--complementary-offset));\n\n    --complementary-fg: hsl(\n        var(--brand-hue)\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    --complementary-bg: hsl(\n        var(--complementary-hue)\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    --complementary: hsl(\n        calc(var(--complementary-hue))\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    /*#endregion --- --- */\n    \n    /* #region === PRIMARY ACCENT === */\n    --primary-hue: calc(var(--brand-hue) + var(--complementary-offset) + var(--accent-offset));\n\n    --primary-fg: hsl(\n        calc(var(--primary-hue) + var(--complementary-offset))\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    --primary-bg: hsl(\n        var(--primary-hue)\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    --primary: var(--primary-bg);\n    /*#endregion --- --- */\n    \n    /* #region === SECONDARY ACCENT === */\n    --secondary-hue: calc(var(--brand-hue) + var(--complementary-offset) - var(--accent-offset));\n    \n    --secondary-fg: hsl(\n        calc(var(--secondary-hue) + var(--complementary-offset))\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    --secondary-bg: hsl(\n        var(--secondary-hue)\n        calc(100% * var(--saturation))\n        calc(100% * var(--lightness))\n    );\n    --secondary: var(--secondary-bg);\n    /*#endregion --- --- */\n\n    /* #region === FORMS === */\n    --form-bg: var(--surface2);\n    --form-fg: var(--text2);\n    --form-border: 1px solid var(--text3);\n    /* #endregion --- --- */\n\n    /* #region ---- Z-Indexes (since 2026-03-16 uib v7.6.0) ---- */\n    --z-nav-h: 980; /* Horizontal navigation menu */\n    --z-toaster: 992; /* Toast container */\n    --z-toast: 990; /* Individual toast - inside toaster only if modal */\n    --z-info-overlay: 10000; /* For info overlays that need to be above everything else */\n    /* #endregion ---- Z-Indexes ---- */\n\n    /* #region === NAVIGATION MENUS === */\n    /* The main background color for the menu */\n    --nav-bg: var(--surface3);\n    /* The main text color for the menu */\n    --nav-fg: var(--text2);\n    /* Secondary background color - used when hovering over other menu items */\n    --nav-2nd-bg: var(--primary-bg);\n    /* More contrasting text color - used for selected menu items */\n    --nav-2nd-fg: var(--text1);\n    /* More contrasting background color - Used for menu pop-up background */\n    --nav-3rd-bg: var(--surface2);\n    /* #endregion --- --- */\n}\n\n/* If the browser reports it, we can adjust for light/dark theme preferences\n * See https://stackoverflow.com/a/57795495 for use with JavaScript\n */\n@media (prefers-color-scheme: light) {\n    :root {\n        color-scheme: light dark;\n        --mode: light;\n    }\n}\n@media (prefers-color-scheme: dark) {\n    :root {\n        /* ---- Active Theme (Dark) ---- */\n        color-scheme: dark light;\n        --mode: dark;\n\n        --saturation-value: var(--dark-saturation);\n        --lightness-value: var(--dark-lightness);\n        \n        --surface-shadow: var(--surface-shadow-dark);\n        --shadow-strength: var(--shadow-strength-dark);\n        \n        --text-factor: var(--dark-text-factor);\n        --text-lightness: var(--dark-text-lightness);\n\n        --surfaces-factor: var(--dark-surfaces-factor);\n        --surfaces-lightness: var(--dark-surfaces-lightness);\n    }\n}\n\n/* Or if the user manually requests a dark colour theme by setting class=\"dark\" on html tag */\n:root.dark {\n    color-scheme: dark light;\n    --mode: dark;\n\n    --saturation-value: var(--dark-saturation);\n    --lightness-value: var(--dark-lightness);\n    \n    --surface-shadow: var(--surface-shadow-dark);\n    --shadow-strength: var(--shadow-strength-dark);\n\n    --text-factor: var(--dark-text-factor);\n    --text-lightness: var(--dark-text-lightness);\n\n    --surfaces-factor: var(--dark-surfaces-factor);\n    --surfaces-lightness: var(--dark-surfaces-lightness);\n\n    /* #region Fix link colours when using dark mode in a light mode browser and visa versa */\n    --a-link: hsl(240, 100%, 81%);\n    --a-visited: hsl(271, 69%, 81%);\n    --a-hover: hsl(0, 100%, 70%); /* Hover state (must be after link/visited) Hover doesn't seem to be defined in Chromium */\n    --a-active: hsl(30, 100%, 50%); /* Active state (must be after hover) This is when you hold mouse down on the link */\n    /* #endregion --- Fix link colours --- */\n}\n\n/*#region --- Surface & std colour classes --- */\n\n.brand {\n    color: var(--text1);\n    background-color: var(--brand);\n}\n.complementary {\n    color: var(--text1);\n    background-color: var(--complementary);\n}\n.surface1 {\n    background-color: var(--surface1);\n    color: var(--text2);\n}\n.surface2 {\n    background-color: var(--surface2);\n    color: var(--text2);\n}\n.surface3 {\n    background-color: var(--surface3);\n    color: var(--text1);\n}\n.surface4 {\n    background-color: var(--surface4);\n    color: var(--text1);\n}\n.surface5 {\n    background-color: var(--surface5);\n    color: var(--text1);\n}\n.rad-shadow {\n    box-shadow: var(--shadow);\n}\n.info {\n    color: var(--text1) !important;\n    background-color: var(--info) !important;\n}\n.info-intense {\n    color: var(--text1) !important;\n    background-color: var(--info-intense) !important;\n}\n.success {\n    color: var(--text1) !important;\n    background-color: var(--success) !important;\n}\n.success-intense {\n    color: var(--text1) !important;\n    background-color: var(--success-intense) !important;\n}\n.warning, .warn {\n    color: var(--text1) !important;\n    background-color: var(--warning) !important;\n}\n.warning-intense, .warn-intense {\n    color: var(--text1) !important;\n    background-color: var(--warning-intense) !important;\n}\n.failure, .error, .danger {\n    color: var(--text1) !important;\n    background-color: var(--failure) !important;\n}\n.failure-intense, .error-intense, .danger-intense {\n    color: var(--text1) !important;\n    background-color: var(--failure-intense) !important;\n}\n.primary {\n    color: var(--primary-fg);\n    background-color: var(--primary-bg);\n}\n.secondary {\n    color: var(--secondary-fg);\n    background-color: var(--secondary-bg);\n}\n\n/*#endregion --- --- --- --- */\n\n/*#region --- Basic reset --- */\n\n*, *::before, *::after {\n    box-sizing: border-box;\n    /* margin: 0; */\n}\n*:focus-visible {\n    outline: 2px solid var(--secondary-fg);\n    outline-offset: 2px;\n}\n@supports not selector(:focus-visible) {\n    *:focus {\n        outline: 1px solid var(--secondary-fg);\n        outline-offset: -4px;\n    }\n}\nhtml {\n    line-height: 1.5; /* Accessible line-height */\n    font-size: 100%;\n    background-color: var(--surface1);\n    color: var(--text2);\n    accent-color: var(--primary);\n}\nbody {\n    margin-left: var(--base-margin);\n    margin-right: var(--base-margin);\n    /* padding: 0.3rem; */\n    font-family: var(--font-family);\n    -webkit-font-smoothing: antialiased; /* Improve text rendering */\n}\nh1, h2, h3, h4, h5, h6, heading {\n    line-height: calc(1em + 0.5rem); /* dynamic heights for headings */\n    text-wrap: balance;\n}\np, li, figcaption {\n    text-wrap: pretty;\n}\nimg, picture, video, canvas, svg {\n    /* display: block; */\n    object-fit: cover;\n    vertical-align: bottom;\n    max-width: 100%;\n    background-color: var(--surface2);\n    margin:var(--base-margin);\n}\np, h1, h2, h3, h4, h5, h6, heading, li, dl, dt, blockquote {\n    overflow-wrap: break-word;\n    -webkit-hyphens: auto;\n    hyphens: auto;\n    word-break: break-word;\n}\ndiv > p, div > article {\n    margin-left: var(--base-margin);\n    margin-right: var(--base-margin);\n}\nbutton, input[type=\"button\" i], input[type=\"reset\" i], input[type=\"submit\" i], ::file-selector-button {\n    /* display: inline-flex; */\n    align-items: center;\n    justify-content: center;\n    border: none;\n    padding: .5rem 1rem;\n    text-decoration: none;\n    background-color: var(--info);\n    color: var(--text1);\n    font-family: inherit;\n    font-size: 1rem;\n    line-height: 1.1;\n    cursor: pointer;\n    text-align: center;\n    transition: background 250ms ease-in-out, transform 150ms ease;\n    -webkit-appearance: none;\n    appearance: none;\n    border-radius: var(--border-radius);\n    /* box-shadow: 0 3px 5px rgb(var(--uib-color-fg), 0.5); */\n    box-shadow: var(--btn-shadow);\n}\nbutton:hover, input[type=\"button\" i]:hover, input[type=\"reset\" i]:hover, input[type=\"submit\" i]:hover {\n    background-color: hsl(var(--info-hsl) / .5);\n}\nbutton:active, input[type=\"button\" i]:active, input[type=\"reset\" i]:active, input[type=\"submit\" i]:active {\n    transform: scale(0.97);\n}\ninput, button, textarea, select {\n    color: var(--text2);\n    font: inherit;\n    min-width: 2em;\n}\ninput, textarea {\n    background-color: var(--surface1);\n}\nselect {\n    background-color: var(--info);\n    color: var(--text2);\n    padding: 0.3rem;\n    box-shadow: var(--btn-shadow);\n    cursor: pointer;\n    transition: background 250ms ease-in-out, transform 150ms ease;\n    border-radius: var(--border-radius);\n    border: none;\n}\nblockquote {\n    /* box-shadow: var(--shadow); */\n    padding: 0.5em 1em 0.5em 1em;\n    margin: 0.5em 0 1em 0;\n    color: inherit;\n    border: none;\n    border-left: 0.25em solid var(--text3);\n    background-color: var(--surface3);\n    box-shadow: none;\n    p, div {\n        margin: 0.3em 0;\n    }\n}\ncode {\n    display: inline-block;\n    font-size: 120%;\n    background-color: var(--surface3);\n    padding: 0 0.3em 0 0.3em;\n}\nheader, footer, main, section, article {\n    /* default prep for container queries */\n    container-type: inline-size;\n}\narticle { /* This lets us use an article like a card display */\n    max-width: var(--max-width);\n    border: 1px solid var(--text3);\n    border-radius: var(--border-radius);\n    padding: var(--border-pad);\n    margin: 1rem var(--border-margin);\n    background-color: var(--surface3);\n}\narticle > h1::before {\n    font-size: 50%;\n    color: hsl( var(--failure-hue) 100% 50% );\n    content: \"⛔ Do not use H1 headings in articles. \"\n}\narticle > h2, article > h3, article > h4 {\n    margin-block-start: 0;\n    border-bottom: 1px solid var(--text3);\n    padding-block-end: var(--border-pad);\n}\n/* HTML5 section tags - only special format top-level to reduce odd fmts */\nbody > main, body > header, body > footer, body > section {\n    padding-left: var(--base-margin);\n    padding-right: var(--base-margin);\n    max-width: var(--max-width);\n    margin: 0 auto;\n}\nbody > main {\n    display: grid;\n    gap: 1rem;\n}\nfooter {\n    margin-top: 1em;\n}\n/* Put asides inside a main to one side\n   Or, use a section or div to wrap multiple */\nmain > article, main .left {\n    grid-column: 1;\n}\nmain > aside, main .right {\n    grid-column: 2;\n}\nsummary {\n    cursor: pointer;\n}\n/* Inline blocks in a summary tag */\nsummary > h2, summary > h3, summary > h4, summary > div, summary > p {\n    display: inline-block;\n}\n\n/* #region Fix link colours when using dark mode in a light mode browser and visa versa */\n  /* Default and visited states */\n  a:link {\n    color: var(--a-link, blue);\n  }\n  a:visited {\n    color: var(--a-visited, purple);\n  }\n  /* Hover doesn't seem to be defined in Chromium */\n  /* Hover state (must be after link/visited) */\n  a:hover {\n    color: var(--a-hover, red);\n    text-decoration-style: double;\n  }\n  /* This is when you hold mouse down on the link */\n  /* Active state (must be after hover) */\n  a:active {\n    color: var(--a-active, orange);\n  }\n/* #endregion --- Fix link colours --- */\n\n/*#endregion --- Basic reset --- */\n\n/*#region --- Tables --- */\ntable {\n    border-collapse: collapse;\n    border: 1px solid var(--text3);\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n    font-variant-numeric: tabular-nums; /* OpenType: better alignment of numbers */\n}\nthead th, thead td {\n    color: var(--text2);\n    font-weight: bolder;\n    background: var(--surface4);\n    /* Make table headers stick to page when scrolling */\n    position: -webkit-sticky;\n    position: sticky;\n}\ntfoot th, tfoot td {\n    color: var(--text2);\n    font-style: italic;\n    background: var(--surface4);\n}\nth[scope=row], tbody th {\n    font-style: italic;\n    color: var(--text2);\n    font-weight:lighter;\n    background: var(--surface4);\n    background-blend-mode: lighten;\n    text-align: left;\n}\nth, td {\n    padding: .5rem;\n    border: 1px solid var(--text4);\n}\ntbody tr:nth-child(even) {\n    color: var(--text2);\n    background-color: var(--surface3);\n    background-blend-mode: lighten;\n}\n/* In case you want to use an hr in a table, reduced top/bottom margins */\ntd hr {\n    margin-top:0.5em;\n    margin-bottom:0.5em;\n}\n/* Extra line spacing for <br> in tables, mainly for use in markdown */\ntd br, th br {\n    display:block;\n    content:\"\";\n    margin-top:0.8em;\n    line-height:190%;\n}\n/*#endregion --- Tables --- */\n\n/*#region --- Forms --- */\nform {\n    display: flex;\n    gap: 1em;\n    flex-direction: column;\n\n    background-color: var(--form-bg);\n    color: var(--form-fg);\n    border: var(--form-border);\n\n    margin: 0.5rem;\n    padding: 0.5rem;\n    border-radius: var(--border-radius);\n}\n\ninput[type=\"color\"] {\n    width: 100%;\n    height: 2.5rem;\n}\ninput:invalid, textarea:invalid, select:invalid {\n    /* outline: 2px solid var(--failure); */\n    border: 2px solid var(--failure);\n}\n/* input:valid, textarea:valid, select:valid {\n    border: 3px solid var(--success);\n} */\n/* at any level of nesting */\nform input, form textarea, form select, form fieldset, form output {\n    /* width: 75%; */\n    flex: 2;\n    border-radius: var(--border-radius);\n    padding:0.3rem;\n    border: var(--form-border);\n}\nform button, input[type=\"button\" i], form input[type=\"reset\" i], form input[type=\"submit\" i] {\n    width:auto;\n    margin-left: .2em;\n    margin-right: .2em;\n}\nform input[type=\"checkbox\" i], form input[type=\"radio\" i] {\n    height:1.5em;\n    vertical-align: middle;\n}\nform:invalid button {\n    background-color: var(--warning);\n}\nform label {\n    flex: 1;\n    vertical-align: middle;\n    display: inline-block;\n}\nform label[required]::after {\n    content: \" *\"\n}\n/* first level only */\nform > div {\n    display: inherit;\n    vertical-align: middle;\n}\nform > div:focus-within {\n    font-weight: bold;\n}\nform > label {\n    align-self: center;\n    text-transform: capitalize;\n}\nform > label:focus-within {\n    font-weight: bold;\n}\n/* Small screen (37.5em @ 16pt is about 600px) */\n@media all and (max-width: 37.5em) {\n    form, form * {\n        display:block;\n        width:100%;\n    }\n    form > label, form > div.btn-row {\n        margin-top: .8rem;\n    }\n    form > :not(label) {\n        margin-bottom: 0.5rem;\n    }\n}\n\n/*#endregion --- Forms --- */\n\n/*#region --- Menus --- */\nnav {\n    /* See :root for the CSS variables used */\n    background-color: var(--nav-bg);\n    border-radius: var(--border-radius);\n    box-shadow: var(--surface-shadow);\n}\nnav ul {\n    list-style-type: none;\n}\nnav [role=\"menuitem\"]:not([aria-current=\"page\"]):hover {\n    text-decoration: underline;\n    color: var(--nav-2nd-fg);\n    background-color: var(--nav-2nd-bg);\n}\nnav [aria-current=\"page\"] {\n    background-color: hsl( /* brand but a bit darker */\n        var(--brand-hue),\n        calc(100% * var(--saturation)),\n        calc(80% * var(--lightness))\n    );\n\tfont-weight: bolder;\n    color: var(--nav-2nd-fg);\n}\nnav a {\n    text-decoration: none;\n    color: inherit;\n    background-color: inherit;\n}\nbutton.menu-toggle {\n    /* Hide the toggle by default */\n    display: none; \n    /* display: block; */\n    cursor: pointer;\n    padding: 0;\n}\nbutton.menu-toggle svg {\n    width: 2em;\n    height: 2em;\n    fill: var(--nav-fg);\n    background-color: var(--nav-bg);\n    transition: transform 150ms ease-in-out;\n    margin:0;\n    padding: 0;\n}\n\n/*#region -- Horizontal menu -- */\n/* nav.horizontal {\n    display: inline-block;\n    padding: 0.5rem;\n} */\nnav.horizontal {\n    display: flex;\n    padding: 0.5rem;\n    align-items: center;\n    /* background-color: var(--nav-bg); */\n    /* border-radius: var(--border-radius); */\n    position: relative;\n}\nnav.horizontal > h2 { /* Menu heading */\n    font-size: inherit;\n    font-weight: inherit;\n    padding-left: 0.5rem;\n}\nnav.horizontal ul { /* [role=\"menubar\"] */\n    display: flex;\n    flex: 2;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    justify-content: flex-start;\n}\nnav.horizontal [role=\"menuitem\"] {\n    padding: .5rem .5rem;\n}\n/* Search form */\nnav.horizontal form {\n    flex: 1;\n    display: inline-flex;\n    flex-wrap: nowrap;\n    flex-direction: row;\n    align-items: center;\n    border: none;\n    margin: inherit;\n    padding: inherit;\n    gap: .2rem;\n}\nnav.horizontal input[type=\"search\"] {\n    flex: 3;\n    filter: brightness(120%);\n}\nnav.horizontal input[type=\"submit\"] {\n    flex: 1;\n    font-size: large;\n    font-weight: bolder;\n    filter: brightness(120%);\n    padding: .5rem 0;\n}\n@media (max-width: 600px) {\n    nav.horizontal ul {\n        display: none;\n    }\n    nav.horizontal[aria-expanded=\"true\"] ul {\n        display: flex;\n        flex-direction: column;\n        position: absolute;\n        background: var(--nav-3rd-bg);\n        box-shadow: var(--shadow);\n        padding: 0.5em 0.5em;\n        border-radius: var(--border-radius);\n        z-index: var(--z-nav-h);\n        left: 1.6em;\n        top: 1em;\n        width: max-content;\n        min-width: 60vw;\n        max-width: 90vw;\n    }\n    nav.horizontal[aria-expanded=\"true\"] a {\n        display: block;\n        width: 100%;\n    }\n    nav.horizontal > .menu-toggle {\n        display: inline-block;\n    }\n}\n/*#endregion -- ---- -- */\n/*#endregion --- Menus --- */\n\n/*#region --- Lists --- */\n.checklist {\n    margin-inline-start: var(--base-margin);\n    margin-inline-end: var(--base-margin);\n    padding-inline-start: .2rem;\n}\nli.check, li.completed {\n    list-style-type: \"✅\";\n    padding-left: 0.4rem;\n    font-family: var(--emoji-fonts);\n}\nli.uncheck, li.unstarted {\n    list-style-type: \"❌\";\n    padding-left: 0.4rem;\n    font-family: var(--emoji-fonts);\n}\nli.started {\n    list-style-type: \"✔️\";\n    padding-left: 0.4rem;\n    font-family: var(--emoji-fonts);\n}\n/*#endregion --- Lists --- */\n\n/*#region ---- Utility ---- */\n\n.animate-pulse {\n    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n@keyframes pulse {\n    50% {\n        opacity: .5;\n    }\n}\n\n.border {\n    border: 1px solid var(--text3);\n    border-radius: var(--border-radius);\n    padding: var(--border-pad);\n    margin: var(--border-margin);\n}\n\n.box {\n    border: 1px solid var(--text3);\n    border-radius: var(--border-radius);\n    padding: 0.5rem;\n}\n.box h2, .box h3, .box h4, .box h5, .box h6 {\n    margin-top: 0.5rem;\n}\n\n.centre, .center {\n    margin-left:auto;\n    margin-right: auto;\n    text-align: center;\n}\n\n.compact {\n    margin: 0;\n    padding-top: 0.2rem;\n    padding-bottom: 0.2rem;\n}\nbutton.compact {\n    padding: 2px 5px;\n    border-radius: 0;\n    background: inherit;\n    margin: 2px;\n}\n\n.emoji { /* Nicer, cross-platform emoji's */\n    font-family: var(--emoji-fonts);\n}\n\n.noborder {\n    border: none;\n}\n\n.text-larger {\n    font-size: larger;\n}\n.text-smaller {\n    font-size: smaller;\n}\n\n/* Utility class to show/hide elements in PWA mode */\n.show-in-pwa {\n    display: none !important;\n}\n.hide-in-pwa {\n    display: var(--pwa-display-mode, block);\n}\n@media (display-mode: standalone), (display-mode: minimal-ui) {\n    .show-in-pwa {\n    display: var(--pwa-display-mode, block);\n    }\n    .hide-in-pwa {\n        display: none !important;\n    }\n}\n\n\n/** These are useful for things like buttons.\n * Default to 5em in size but are easily customised\n * using CSS variables.\n * @example\n *   <button class=\"square\" style=\"--sq: 10em;\">Square</button>\n *   <button class=\"round\" style=\"--dia: 10em;\">Round</button>\n *   <button class=\"square\" style=\"--sq: 10em;--sqw: 20em;\">Rectangle</button>\n *   <button class=\"round\" style=\"--dia: 10em;--roundw: 20em;\">Oval</button>\n */\n/* Make something square or rectangular. */\n.square {\n    --sq: 5em;\n    width: var(--sqw, var(--sq));\n    height: var(--sqh, var(--sq));\n    border-radius: calc(var(--sq) * 0.1);\n}\n/* Make something circular, oval or pill-shaped */\n.round {\n    --dia: 5em;\n    width: var(--roundw, var(--dia));\n    height: var(--roundh, var(--dia));\n    border-radius: var(--roundb, var(--dia));\n}\n\n/* Apply to headings where you want a sub-title */\n.with-subtitle {\n    margin-bottom: 0;\n}\n/* Add the subtitle as a div with the Aria role */\n[role=\"doc-subtitle\"] {\n    font-size: smaller;\n    font-style: italic;\n    margin-bottom: 1em;\n}\n\n.uppercase {\n    text-transform: uppercase;\n}\n\n/* Visually hidden but still accessible to screen readers\n   Use for skip links, form explanations, status updates\n   otherwise not needed for sighted users.\n */\n.visually-hidden:not(:focus):not(:active) {\n  /* Tab focusable elements will be visible when active */\n    border: 0;\n    clip-path: inset(100%);\n    height: 1px;\n    margin: 0;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n}\n/*#endregion ---- Utility ---- */\n\n/*#region -- Toasts/Notifications/Alerts - Readable pop-over notifications -- */\n\n.toaster {\n    position:absolute; \n    top:0; left:0;\n    min-width:100vw; min-height:100vh; \n    z-index: var(--z-toaster);\n    -webkit-backdrop-filter: grayscale(60%) blur(10px);\n    backdrop-filter: grayscale(60%) blur(10px);\n    display:flex;\n    flex-direction:column;\n\n    --toast-x-position: center;\n    --toast-y-position: center;\n\n    align-items: var(--toast-x-position, center);\n    justify-content: var(--toast-y-position, center);\n}\n.toast { /* Individual toast - only inside toaster if modal */\n    background: var(--surface1);\n    color: var(--text2);\n    border: 4px solid var(--text3);\n    border-radius: var(--border-radius);\n    box-shadow: var(--shadow2);\n    background-clip: border-box;\n    box-sizing: border-box;\n    min-width:50vw; max-width:50vw; max-height:50vh; overflow-y:auto;\n    padding:1em; margin-bottom:.5em; margin-top:.5em;\n    z-index: var(--z-toast);\n    /* Allow for further positioning of the toast */\n    position:relative;\n    top:auto;left:auto;\n}\n/* .toast.alert {\n} */\n.toast-head > svg {\n    width: 30px;\n    background-color: var(--surface1);\n    fill: var(--warning-intense);\n    float: left;\n    margin: .5em .8em 0.5em .1em;\n}\n.toast-head {\n    font-weight: bold\n}\n.toast-body {\n    clear: both;\n}\n\n/* Old settings\n.toaster {\n    position:absolute; \n    top:0; left:0; min-width:100vw; min-height:100vh; \n    -webkit-backdrop-filter: grayscale(60%) blur(10px);\n    backdrop-filter: grayscale(60%) blur(10px);\n    display:flex; flex-direction:column; justify-content:center; align-items:center;\n    z-index:998;\n}\n.toast {\n    border: 4px solid var(--text3);\n    border-radius: var(--border-radius);\n    box-shadow: var(--shadow2);\n    background-clip: border-box;\n    box-sizing: border-box;\n    min-width:50vw; max-width:50vw; max-height:50vh; overflow-y:auto;\n    padding:1em; margin-bottom:.5em; margin-top:.5em;\n    z-index:999;\n}\n.toast.alert {\n    border: 4px solid var(--text3);\n    border-radius: var(--border-radius);\n    box-shadow: var(--shadow2);\n    background-clip: border-box;\n    box-sizing: border-box;\n    min-width:50vw; max-width:50vw; max-height:50vh; overflow-y:auto; \n    padding:1em; margin-bottom:.5em; margin-top:.5em;\n    z-index:999;\n}\n.toast-head {font-weight:bold} */\n\n/*#endregion -- Toasts/Notifications/Alerts - Readable pop-over notifications -- */\n\n/*#region ---- Status Grid ---- */\n.status-grid {\n    --status-grid-min: 14em;\n    --status-grid-max: 1fr;\n    --status-grid-gap: 0.5rem;\n    display:grid;\n    grid-template-columns: repeat(auto-fit, minmax(var(--status-grid-min), var(--status-grid-max)));\n    gap: var(--status-grid-gap);\n    list-style-position: inside;\n}\n.status-heading {\n  grid-column: 1/-1;\n}\n.status-link {\n  display:contents;\n  color:inherit;\n  text-decoration:none;\n}\n.status-side-panel {\n    border-radius: 9999px;\n    width: .5rem;\n    height: 100%;\n    background-color: var(--status-color, var(--surface1));\n}\n/*#endregion ---- ---- ---- */\n\n/*#region ---- Flex/Grid Layouts ---- */\n\n.grid {\n    display:grid;\n    gap:0.5rem;\n}\n.grid-2 {\n    display:grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap:0.5rem;\n}\n.grid-3 {\n    display:grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    /* grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); */\n    gap:0.5rem;\n}\n.grid-4 {\n    display:grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap:0.5rem;\n}\n.grid-fit {\n    display: grid;\n    gap: 0.5rem;\n    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-fit-min), 100%), 1fr));\n}\n\n.flex {\n    display: flex;\n    gap:0.5rem;\n}\n.flex-wrap {\n    display: flex;\n    flex-wrap: wrap;\n    gap:0.5rem;\n}\n\n/*#endregion ---- ---- ---- */\n\n/*#region for Syntax Highlighted pre's */\n#uib_last_msg_wrap {\n    position:relative;\n}\n#uib_last_msg_wrap > button {\n    display:none;\n    position:absolute;\n    color:hsl(0,0%,50%,.5);\n}\n#uib_last_msg_wrap:hover > button {\n    display:initial;\n}\n#uib_last_msg_wrap > button:hover {\n    color:hsl(0,0%,50%,1);\n}\n\n.syntax-highlight {\n    color:white;\n    display:block;\n    background-color:black;\n    padding:5px 10px;\n    font-family: Consolas, \"ui-monospace\", \"Lucida Console\", monospace;\n    font-size: smaller;\n    white-space: pre;\n    width: 99%;\n    height: var(--syntax-highlight-height, 22em);\n    overflow: auto;\n    resize: both;\n}\n.syntax-highlight > .key {color:#ffbf35}\n.syntax-highlight > .string {color:#5dff39;}\n.syntax-highlight > .number {color:#70aeff;}\n.syntax-highlight > .boolean {color:#b993ff;}\n.syntax-highlight > .null {color:#93ffe4;}\n.syntax-highlight > .undefined {color:#ff93c9;}\n/*#endregion */\n\n/* #region ---- Information Overlay Panel ---- */\n\n#uib-info-overlay {\n    --callout-color: var(--text2);\n    --callout-bgcolor: var(--surface3);\n    position: fixed;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: var(--z-info-overlay);\n    max-width: 90vw;\n    width: auto;\n    min-width: 21em;\n    padding: 0.5em;\n    background-color: var(--surface5);\n    border: 2px solid var(--surface5);\n}\n\n.uib-overlay-entry {\n    background-color: var(--callout-bgcolor);\n    border: 2px solid var(--callout-color);\n    border-radius: var(--border-radius, 0.5em);\n    box-shadow: 0 0 2px 2px var(--callout-color);\n    padding: 1em;\n    margin-bottom: 0.5rem;\n}\n\n.uib-overlay-header {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.uib-overlay-icon {\n    font-size: 1.2em;\n}\n\n.uib-overlay-title {\n    margin: 0;\n    color: var(--callout-color);\n}\n\n.uib-overlay-dismiss {\n    margin-left: auto;\n    background: transparent;\n    border: none;\n    font-size: 1.5em;\n    cursor: pointer;\n    padding: 0.25rem;\n    border-radius: 0;\n    box-shadow: none;\n    transition: background-color 0.2s;\n}\n.uib-overlay-dismiss:hover {\n    background-color: var(--surface2) !important;\n}\n\n/* #endregion ---- Information Overlay Panel ---- */\n"],"names":[]}