diff --git a/public/assets/scaffolding-min.js b/public/assets/scaffolding-min.js
index f94bc22..2f0b9a1 100644
--- a/public/assets/scaffolding-min.js
+++ b/public/assets/scaffolding-min.js
@@ -3014,13 +3014,8 @@ Prism.languages.webmanifest = Prism.languages.json;
 
 /***/ }),
 /* 8 */
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+/***/ (function(module) {
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   init: function() { return /* binding */ init; }
-/* harmony export */ });
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -3122,35 +3117,37 @@ var calculateStickyPosition = function calculateStickyPosition(s) {
     });
   }
 };
-function init() {
-  var p = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
-  font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px", ""));
-  p.querySelectorAll("sticky-note").forEach(function (s) {
-    if (s.querySelectorAll("svg").length == 0) {
-      var wrapper = document.createElement("sticky-note-wrapper");
-      s.parentNode.insertBefore(wrapper, s);
-      wrapper.appendChild(s);
-      s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
-      s.innerHTML = "<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>".concat(s.innerHTML, "</div></div>");
-    }
-    calculateStickyPosition(s);
-    drag(s);
-    s.ondblclick = function (e) {
-      if (e.ctrlKey) {
-        calculateStickyPosition(s);
-      } else {
-        // add one click select
-      }
-    };
-  });
-  window.onresize = function () {
+module.exports = {
+  init: function init() {
+    var p = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
     font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px", ""));
-    var stickies = p.querySelectorAll("sticky-note");
-    stickies.forEach(function (s) {
+    p.querySelectorAll("sticky-note").forEach(function (s) {
+      if (s.querySelectorAll("svg").length == 0) {
+        var wrapper = document.createElement("sticky-note-wrapper");
+        s.parentNode.insertBefore(wrapper, s);
+        wrapper.appendChild(s);
+        s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
+        s.innerHTML = "<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>".concat(s.innerHTML, "</div></div>");
+      }
       calculateStickyPosition(s);
+      drag(s);
+      s.ondblclick = function (e) {
+        if (e.ctrlKey) {
+          calculateStickyPosition(s);
+        } else {
+          // add one click select
+        }
+      };
     });
-  };
-}
+    window.onresize = function () {
+      font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px", ""));
+      var stickies = p.querySelectorAll("sticky-note");
+      stickies.forEach(function (s) {
+        calculateStickyPosition(s);
+      });
+    };
+  }
+};
 
 /***/ }),
 /* 9 */
@@ -3226,27 +3223,47 @@ var waitForElement = function waitForElement(selector) {
     });
   });
 };
+var tabsetCount = 0;
 function init() {
   var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
   var spacer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   container.querySelectorAll(".tab-group, tabset").forEach(function (tabGroup) {
     if (tabGroup.querySelector("[role=tablist]") === null) {
+      if (tabGroup.getAttribute("id") == null) {
+        tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
+        tabsetCount++;
+      }
       var tabgroup = tabGroup.getAttribute("id");
       var tablist = "";
       Array.from(tabGroup.children).forEach(function (child) {
-        var tab = child.getAttribute("tab") || child.getAttribute("data-tab");
+        // is details? 
+        var dtls = child.nodeName == "DETAILS" ? true : false;
+
+        // get the tab text 
+        var tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
+
+        // if the tab text is not blank 
         if (tab !== null) {
           var tabID = tab.replace(/\W+/g, "-").toLowerCase();
-          var tabPanel = document.createElement('div');
+
+          // define the tab panel content
+          var tabPanel = null;
+          if (dtls) {
+            tabPanel = child;
+            tabPanel.setAttribute("open", "");
+          } else {
+            tabPanel = document.createElement('div');
+            tabPanel.appendChild(child.cloneNode(true));
+          }
           tabPanel.id = "tab-panel-".concat(tabgroup, "-").concat(tabID);
           tabPanel.className = tablist === "" ? "open" : "";
           tabPanel.setAttribute("role", "tabpanel");
           tabPanel.setAttribute("tabindex", "0");
           tabPanel.setAttribute("aria-labelledby", "tab-".concat(tabgroup, "-").concat(tabID));
-          tabPanel.appendChild(child.cloneNode(true));
           child.parentNode.replaceChild(tabPanel, child);
-          tablist += "<li tabindex=\"0\" role=\"tab\" ".concat(tablist === "" ? "class='selected'" : "", " id=\"tab-").concat(tabgroup, "-").concat(tabID, "\"><span>").concat(tab, "</span></li>");
+          var cls = tablist === "" ? "class='selected'" : "";
+          tablist += "<li tabindex=\"0\" role=\"tab\" ".concat(cls, " id=\"tab-").concat(tabgroup, "-").concat(tabID, "\"><span>").concat(tab, "</span></li>");
         } else {
           child.classList.add("tab-hidden");
         }
@@ -3256,28 +3273,35 @@ function init() {
       ul.innerHTML = spacer != true ? "".concat(tablist) : "".concat(tablist, "<li role=\"separator\" class=\"separator\"></li>");
       tabGroup.insertBefore(ul, tabGroup.firstChild);
       tabGroup.querySelectorAll('[role="tab"]').forEach(function (tab) {
-        tab.addEventListener("click", function (e) {
-          if (e.altKey && typeof args.altModifier == "function") {
-            args.altModifier(tab);
-          } else if (e.shiftKey && typeof args.shiftModifier == "function") {
-            args.shiftModifier(tab);
-          } else if (e.metaKey && typeof args.metaModifier == "function") {
-            args.metaModifier(tab);
-          } else {
-            var siblings = Array.from(tab.parentNode.children);
-            siblings.forEach(function (sibling) {
-              return sibling.classList.remove("selected");
-            });
-            tab.classList.add("selected");
-            var tabPanels = Array.from(tab.parentNode.parentNode.children).filter(function (child) {
-              return child.getAttribute("role") === "tabpanel";
-            });
-            tabPanels.forEach(function (panel) {
-              return panel.classList.remove("open");
-            });
-            var tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
-            document.getElementById(tabPanelId).classList.add("open");
-          }
+        tab.addEventListener("click", function (evt) {
+          // if (evt.altKey && typeof args.altModifier == "function") {
+          // 	args.altModifier(tab, evt);
+          // } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
+          // 	args.shiftModifier(tab, evt);
+          // } else if (evt.metaKey && typeof args.metaModifier == "function") {
+          // 	args.metaModifier(tab, evt);
+          // } else {
+          var siblings = Array.from(tab.parentNode.children);
+          siblings.forEach(function (sibling) {
+            return sibling.classList.remove("selected");
+          });
+          tab.classList.add("selected");
+          var urlPath = window.location;
+          urlPath.hash = evt.currentTarget.getAttribute("id");
+          window.history.pushState({
+            "pageTitle": window.title + " : " + evt.currentTarget.innerHTML
+          }, "", urlPath.toString());
+          // window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
+
+          var tabPanels = Array.from(tab.parentNode.parentNode.children).filter(function (child) {
+            return child.getAttribute("role") === "tabpanel";
+          });
+          tabPanels.forEach(function (panel) {
+            return panel.classList.remove("open");
+          });
+          var tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
+          document.getElementById(tabPanelId).classList.add("open");
+          //}
         });
         tab.addEventListener("keypress", function (e) {
           e.preventDefault();
@@ -3295,6 +3319,12 @@ function init() {
       });
     }
   });
+  addEventListener("hashchange", function (evt) {
+    document.querySelector(window.location.hash).dispatchEvent(click);
+
+    // window.location.hash
+    // console.log(window.location.hash)
+  });
 }
 
 /***/ })
@@ -3398,6 +3428,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
 /* harmony import */ var _node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6__);
 /* harmony import */ var _pg_patterns_core_sticky_note_sticky_note_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8);
+/* harmony import */ var _pg_patterns_core_sticky_note_sticky_note_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_pg_patterns_core_sticky_note_sticky_note_js__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var _pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(9);
 /* harmony import */ var _pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__);
 /* harmony import */ var _pg_patterns_core_tabs_tabs_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(10);
diff --git a/public/assets/scaffolding.css b/public/assets/scaffolding.css
index ba24682..a443c1f 100644
--- a/public/assets/scaffolding.css
+++ b/public/assets/scaffolding.css
@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");:root{--colour-blue:#2e51a1;--colour-blue-l:#5c7abf;--colour-blue-xl:#b2c3ec;--colour-blue-d:#133176;--colour-blue-xd:#031235;--colour-grey:#7f7f7f;--colour-grey-l:#b2b2b2;--colour-grey-xl:#d8d8d8;--colour-grey-xxl:#f0f0f0;--colour-white:#fff;--colour-page:#fff;--colour-light:#fff;--colour-grey-d:#4c4c4c;--colour-grey-xd:#4c4c4c;--colour-black:#000;--colour-dark:#000}h1[class^=status]:after,h2[class^=status]:after,span[class^=status]:after{border-radius:50%;border:1px solid #CCC;content:" ";display:inline-block;height:1.5rem;margin-left:0.5rem;position:relative;top:2px;width:1.5rem}.status-not-started:after{background-color:transparent}.status-in-progress:after{background-color:#f0b031}.status-complete:after{background-color:#2e51a1}.status-deprecated:after{background-color:#da2c5b}code[class*=language-],pre[class*=language-]{color:black;background:none;text-shadow:0 1px white;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:0.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:0.1em;border-radius:0.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:slategray}.token.punctuation{color:#999}.token.namespace{opacity:0.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:0.3em;right:0.2em;-webkit-transition:opacity 0.3s ease-in-out;transition:opacity 0.3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:0.8em;padding:0 0.5em;background:#f5f2f0;background:rgba(224,224,224,0.2);-webkit-box-shadow:0 2px 0 0 rgba(0,0,0,0.2);box-shadow:0 2px 0 0 rgba(0,0,0,0.2);border-radius:0.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right}use *{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-family:Helvetica,Arial,sans-serif;font-size:14pt}@media (max-width:768px){html{font-size:16pt}}html.show-breakpoints body:after,html.show-breakpoints body:before{background-color:#555;color:white;content:"bigger than extra large";display:-ms-grid;display:grid;font-family:sans-serif;font-size:25px;-ms-grid-columns:auto;grid-template-columns:auto;padding:25px;place-content:center}@media (max-width:1200px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"extra large"}}@media (max-width:992px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"large"}}@media (max-width:768px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"medium"}}@media (max-width:576px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"small"}}#copystatus{left:50%;position:absolute;z-index:100}#copystatus div{border-radius:1rem;border:1px solid green;left:-50%;padding:1rem;position:relative;white-space:nowrap}#copystatus div:after{clear:both;content:" ";display:block}#copystatus div.succeeded{background-color:white;border-color:black;color:black}#copystatus div.failed{background-color:white;border-color:#f00;color:#f00}color-samples{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}@media (max-width:992px){color-samples{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);max-width:100%;width:100%}}@media (max-width:576px){color-samples{-ms-grid-columns:auto;grid-template-columns:auto;width:100%;max-width:100%}}color-samples color-sample{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;border:1px solid #CCC;display:-ms-grid;display:grid;font-family:inherit;gap:0.5rem;grid-template-areas:"name      name      name     hex       hex       hex" "name      name      name     rgb       rgb       rgb" "acc       acc       acc      acc       acc       acc" "lighter   lighter   lighter  darker    darker    darker" "notes     notes     notes    notes     notes     notes";-ms-grid-columns:1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr;grid-template-columns:repeat(6,1fr);-ms-grid-rows:1.5rem 0.5rem 1.5rem 0.5rem 10rem 0.5rem max-content 0.5rem max-content 0.5rem max-content;grid-template-rows:repeat(2,1.5rem) 10rem repeat(3,-webkit-max-content);grid-template-rows:repeat(2,1.5rem) 10rem repeat(3,max-content);padding:1rem;width:20rem;max-width:318px}@media (max-width:992px){color-samples color-sample{width:100%;max-width:100%}}color-samples color-sample name{-ms-grid-row:1;-ms-grid-row-span:3;-ms-grid-column:1;-ms-grid-column-span:5;-ms-grid-row-align:start;align-self:start;font-size:1.25rem;grid-area:name}color-samples color-sample name span{cursor:pointer}color-samples color-sample rgb{-ms-grid-row:3;-ms-grid-column:7;-ms-grid-column-span:5;grid-area:rgb;white-space:nowrap}color-samples color-sample hex{-ms-grid-row:1;-ms-grid-column:7;-ms-grid-column-span:5;grid-area:hex;white-space:nowrap}color-samples color-sample>accessibility{border-bottom:1px solid #ccc;border-top:1px solid #ccc}color-samples color-sample accessibility{-ms-grid-row:5;-ms-grid-column:1;-ms-grid-column-span:11;grid-area:acc;-ms-grid-row:3;grid-row:3;padding:0.5rem 0;display:-ms-grid;display:grid;gap:0.5rem;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:2.5rem (-webkit-max-content)[2];-ms-grid-rows:2.5rem (max-content)[2];grid-template-rows:2.5rem repeat(2,-webkit-max-content);grid-template-rows:2.5rem repeat(2,max-content)}color-samples color-sample accessibility .result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);border:1px solid #ccc;padding:0 1rem;text-align:center}color-samples color-sample accessibility .result.accwaa,color-samples color-sample accessibility .result.accwaaa{background-color:white;color:black}color-samples color-sample accessibility .result.accbaa,color-samples color-sample accessibility .result.accbaaa{background-color:black;color:white}color-samples color-sample accessibility .result span:nth-child(2){font-size:2rem}color-samples color-sample accessibility .aa,color-samples color-sample accessibility .aaa{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;display:block;font-size:0.75rem}color-samples color-sample accessibility .acchb{-ms-grid-column:2;grid-column:2}color-samples color-sample accessibility .acchb,color-samples color-sample accessibility .acchw{display:-ms-grid;display:grid;grid-tempate-columns:auto;-ms-grid-rows:(-webkit-max-content)[2];-ms-grid-rows:(max-content)[2];grid-template-rows:repeat(2,-webkit-max-content);grid-template-rows:repeat(2,max-content);-ms-grid-row-align:start;align-self:start;text-align:center;padding:0}color-samples color-sample accessibility .acchb span,color-samples color-sample accessibility .acchw span{-ms-grid-row:1;grid-row:1;grid-column:1/-1;font-size:0.9rem}color-samples color-sample accessibility .acchb small,color-samples color-sample accessibility .acchw small{text-align:center;-ms-grid-row:2;grid-row:2;grid-column:1/-1;font-size:0.75rem}color-samples color-sample sample-block{-ms-grid-row-align:start;align-self:start;-ms-grid-column-span:3;grid-column:span 3;-ms-grid-row:4;grid-row:4}color-samples color-sample sample-block color-pill{display:-ms-grid;display:grid;grid-gap:0.5rem;-ms-grid-columns:20px -webkit-max-content auto;-ms-grid-columns:20px max-content auto;grid-template-columns:20px -webkit-max-content auto;grid-template-columns:20px max-content auto}color-samples color-sample sample-block color-pill :first-child{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;border-radius:5px;border:1px solid #CCC;display:inline-block;height:10px;width:20px}color-samples color-sample sample-block color-pill span{cursor:pointer}color-samples color-sample sample-block color-pill span .tooltip-tc{padding:0.5rem;width:20rem;max-width:318px;height:10.5rem;display:-ms-grid;display:grid;gap:0.5rem;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:(-webkit-max-content)[3];-ms-grid-rows:(max-content)[3];grid-template-rows:repeat(3,-webkit-max-content);grid-template-rows:repeat(3,max-content)}color-samples color-sample sample-block color-pill span .tooltip-tc .result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);border:1px solid #ccc;padding:0 1rem;text-align:center}color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaa,color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaaa{background-color:white;color:black}color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaa,color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaaa{background-color:black;color:white}color-samples color-sample sample-block color-pill span .tooltip-tc .result span{border:none}color-samples color-sample sample-block color-pill span .tooltip-tc .result span:nth-child(2){font-size:2rem}color-samples color-sample sample-block color-pill span .tooltip-tc .aa,color-samples color-sample sample-block color-pill span .tooltip-tc .aaa{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;display:block;font-size:0.75rem}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb{-ms-grid-column:2;grid-column:2}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw{border:none;display:block;width:100%;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span{border:none;font-size:0.9rem;width:100%}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span:after,color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span:before,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span:after,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span:before{display:none}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb small,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw small{font-size:0.75rem;text-align:center}color-samples color-sample notes{border-top:1px solid #ccc;grid-column:1/-1;padding-top:0.5rem}[role=tooltip]{background:#fff;border-radius:0.5rem;color:#000;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));font-size:1rem;font-weight:400;inline-size:-webkit-max-content;inline-size:-moz-max-content;inline-size:max-content;line-height:initial;margin:0;max-inline-size:25rem;opacity:0;padding:0.75rem 1.5rem;pointer-events:none;position:absolute;text-align:start;-webkit-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-ms-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-webkit-transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease,-webkit-transform 0.2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:filter;z-index:10}[role=tooltip]:before{clip-path:inset(50%);clip:rect(1px,1px,1px,1px);content:"; Has tooltip: ";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}[role=tooltip]:after{background:#fff;content:"";inset:0;-webkit-mask:var(--tooltip-pointer);mask:var(--tooltip-pointer);position:absolute;z-index:-1}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]),[tip-position=bottom],[tip-position=block-end]){text-align:center}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])){inset-inline-start:50%;inset-block-end:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])):after{--tooltip-pointer:conic-gradient(from -30deg at bottom,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) bottom/100% 50% no-repeat;inset-block-end:-1rem;-webkit-border-after:1rem solid transparent;border-block-end:1rem solid transparent}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]){inset-inline-start:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]):after{--tooltip-pointer:conic-gradient(from 60deg at left,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) left/50% 100% no-repeat;inset-inline-start:-1rem;-webkit-border-start:1rem solid transparent;border-inline-start:1rem solid transparent}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]){inset-inline-start:50%;inset-block-start:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]):after{--tooltip-pointer:conic-gradient(from 150deg at top,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) top/100% 50% no-repeat;inset-block-start:-1rem;-webkit-border-before:1rem solid transparent;border-block-start:1rem solid transparent}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]){inset-inline-end:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]):after{--tooltip-pointer:conic-gradient(from -120deg at right,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) right/50% 100% no-repeat;inset-inline-end:-1rem;-webkit-border-end:1rem solid transparent;border-inline-end:1rem solid transparent}@media (prefers-color-scheme:dark){[role=tooltip]{background:#1f2127;color:#fff;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5))}[role=tooltip]:after{background:#1f2127}}:has(>[role=tooltip]){position:relative}:has(>[role=tooltip]):is(:hover,:focus-visible,:active)>[role=tooltip]{opacity:1;-webkit-transition-delay:300ms;transition-delay:300ms}@media (prefers-reduced-motion:no-preference){:has(>[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]))):not(:hover):not(:active) [role=tooltip]{--tooltip-y:3px}:has(>[role=tooltip]:is([tip-position=right],[tip-position=inline-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * -3px * -1)}:has(>[role=tooltip]:is([tip-position=bottom],[tip-position=block-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-y:-3px}:has(>[role=tooltip]:is([tip-position=left],[tip-position=inline-start])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * 3px * -1)}}sticky-note-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid transparent;border-radius:50%;display:inline-block;height:0.5rem;position:relative;width:0.5rem}sticky-note-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box}sticky-note-wrapper sticky-note{cursor:-webkit-grab;cursor:grab;display:-ms-grid;display:grid;float:left;font-size:1rem;height:13rem;left:0;place-items:stretch;position:absolute;top:0;width:13rem;z-index:100}sticky-note-wrapper sticky-note:active{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}sticky-note-wrapper sticky-note.right{float:right}sticky-note-wrapper sticky-note>div{-ms-grid-row:1;grid-row:1;-ms-grid-column:1;grid-column:1}sticky-note-wrapper sticky-note>div:first-child{background-color:rgba(0,0,0,0.25);-webkit-box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);display:-ms-grid;display:grid;margin:2rem 1rem 0.25rem 0.36rem;width:calc(100% - 1rem)}sticky-note-wrapper sticky-note>div:nth-child(2){clip-path:url(#stickyClip);display:-ms-grid;display:grid;font-family:"Kalam",cursive;font-style:1rem;font-weight:300;line-height:1.25rem;padding:1rem;place-items:center;text-align:center}sticky-note-wrapper sticky-note>div:nth-child(2)>*{font-family:"Kalam",cursive!important;font-style:normal!important;font-weight:300!important}@media screen and (max-width:1024px){sticky-note-wrapper sticky-note>div:nth-child(2){max-width:13rem;min-width:13rem;width:1rem}}@media screen and (max-width:768px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:1.75rem;max-width:21rem;min-height:21rem}}@media screen and (max-width:640px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:2.5rem;max-width:26rem;min-height:26rem}}sticky-note-wrapper sticky-note>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#ffffdd),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,#ffffc9),to(#ffffba));background:linear-gradient(180deg,#ffffdd 0%,#ffffd3 2%,#ffffd3 12%,#ffffc9 75%,#ffffba 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#9dddec),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,#8bd7e8),to(#7fd3e6));background:linear-gradient(180deg,#9dddec 0%,#94daea 2%,#94daea 12%,#8bd7e8 75%,#7fd3e6 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#fa7c93),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,#fa6883),to(#f95977));background:linear-gradient(180deg,#fa7c93 0%,#fa728b 2%,#fa728b 12%,#fa6883 75%,#f95977 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#c5fcc9),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,#b1fab7),to(#a3faaa));background:linear-gradient(180deg,#c5fcc9 0%,#bbfbc0 2%,#bbfbc0 12%,#b1fab7 75%,#a3faaa 100%)}sticky-note-wrapper:has(sticky-note:hover){background-color:#ffffd3;border:1px solid black}sticky-note-wrapper:has(sticky-note.yellow:hover){background-color:#ffffd3}sticky-note-wrapper:has(sticky-note.blue:hover){background-color:#94daea}sticky-note-wrapper:has(sticky-note.pink:hover){background-color:#fa728b}sticky-note-wrapper:has(sticky-note.green:hover){background-color:#bbfbc0}div.status-report p.heading,div.status-report td[colspan="2"]{font-size:1.125rem;font-weight:bolder!important;grid-column:1/-1;margin:2rem 0 0.5rem 0;padding-top:1.5rem!important}div.status-report td:not([colspan="2"]) span{display:-ms-grid;display:grid;-ms-grid-columns:auto 1rem;grid-template-columns:auto 1rem;margin:0 1rem 0 0}div.status-report td:not([colspan="2"]) span span[class^=status]:after{height:1rem!important;width:1rem!important;margin-right:1rem}div.status-report td:not([colspan="2"]) a{margin:0 1rem 0 0}div.status-report td:not([colspan="2"]).indent a{margin:0 1rem 0 1.5rem}article[data-status=deprecated]:not(.show-deprecated){display:none}body{margin:0;padding:0}body a.skip{position:absolute;left:-9999px}body .container{display:-ms-grid;display:grid;-ms-grid-columns:auto (22rem)[2] auto;grid-template-columns:auto repeat(2,22rem) auto;margin:0 auto;width:100vw}body .container header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}body .container header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}body .container header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}body .container header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}body .container header>div .header-title h1{margin:0;padding:0 1rem}body .container header>div .header-title h1 a,body .container header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}body .container nav{background-color:var(--colour-blue);-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;display:none}body .container nav ul{margin:1rem 0}body .container nav ul li{display:inline-block;margin-right:1rem}body .container nav a{color:var(--colour-white);text-decoration:none}@media (min-width:768px){body .container nav{display:initial}}body .container p.info-switches{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-ms-grid;display:grid;gap:0.25rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;-ms-grid-row:3;grid-row:3;-ms-grid-columns:auto (-webkit-max-content)[2];-ms-grid-columns:auto (max-content)[2];grid-template-columns:auto repeat(2,-webkit-max-content);grid-template-columns:auto repeat(2,max-content);text-align:right}body .container p.info-switches [role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}body .container p.info-switches [role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}body .container p.info-switches [role=switch][aria-checked=true]{background-color:#2e51a1}body .container p.info-switches [role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}body .container p.info-switches label{text-align:left}body .container main{display:block;grid-column:1/-1;-ms-grid-row:4;grid-row:4}@media (max-width:768px){body .container main{-ms-grid-row:3;grid-row:3;padding:0}}@supports (grid-area:auto){body .container main{display:grid;grid-template-columns:1rem repeat(2,auto) 1rem}@media (min-width:768px){body .container main{grid-template-columns:auto repeat(2,22rem) auto}}}body .container main h1,body .container main h2,body .container main h3,body .container main h4,body .container main h5,body .container main h6{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4}body .container main article{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;margin-top:2rem;min-width:0}body .container main article.status-deprecated{display:none}body .container main article .tab-group,body .container main article tabset{margin:2rem 0 1rem 0}body .container main article .tab-group>ul,body .container main article tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}body .container main article .tab-group>ul li.separator,body .container main article tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}body .container main article .tab-group .tab-hidden,body .container main article tabset .tab-hidden{display:none}body .container main article .tab-group [role=tab],body .container main article tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;color:#000;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}body .container main article .tab-group [role=tab]:last-of-type,body .container main article tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}body .container main article .tab-group [role=tab]:not(.selected),body .container main article tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f;color:#000}body .container main article .tab-group [role=tab] span,body .container main article tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}body .container main article .tab-group [role=tabpanel],body .container main article tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:#7f7f7f solid 1px;padding:1rem;z-index:1}body .container main article .tab-group [role=tabpanel]:not(.open),body .container main article tabset [role=tabpanel]:not(.open){display:none}body .container main article .tab-group [role=tabpanel] pre,body .container main article tabset [role=tabpanel] pre{background-color:var(--colour-black-5);font-size:0.8rem}body .container main article .tab-group [role=tabpanel] pre code:not(.inline),body .container main article tabset [role=tabpanel] pre code:not(.inline){display:block;width:100%}body .container main article p.switch{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-ms-grid;display:grid;grid-gap:0.5rem;-ms-grid-columns:-webkit-max-content auto;-ms-grid-columns:max-content auto;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto}body .container main article p.switch [role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}body .container main article p.switch [role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}body .container main article p.switch [role=switch][aria-checked=true]{background-color:#2e51a1}body .container main article p.switch [role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}
\ No newline at end of file
+@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");:root{--colour-blue:#2e51a1;--colour-blue-l:#5c7abf;--colour-blue-xl:#b2c3ec;--colour-blue-d:#133176;--colour-blue-xd:#031235;--colour-grey:#7f7f7f;--colour-grey-l:#b2b2b2;--colour-grey-xl:#d8d8d8;--colour-grey-xxl:#f0f0f0;--colour-white:#fff;--colour-page:#fff;--colour-light:#fff;--colour-grey-d:#4c4c4c;--colour-grey-xd:#4c4c4c;--colour-black:#000;--colour-dark:#000}h1[class^=status]:after,h2[class^=status]:after,span[class^=status]:after{border-radius:50%;border:1px solid #CCC;content:" ";display:inline-block;height:1.5rem;margin-left:0.5rem;position:relative;top:2px;width:1.5rem}.status-not-started:after{background-color:transparent}.status-in-progress:after{background-color:#f0b031}.status-complete:after{background-color:#2e51a1}.status-deprecated:after{background-color:#da2c5b}code[class*=language-],pre[class*=language-]{color:black;background:none;text-shadow:0 1px white;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:0.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:0.1em;border-radius:0.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:slategray}.token.punctuation{color:#999}.token.namespace{opacity:0.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:0.3em;right:0.2em;-webkit-transition:opacity 0.3s ease-in-out;transition:opacity 0.3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:0.8em;padding:0 0.5em;background:#f5f2f0;background:rgba(224,224,224,0.2);-webkit-box-shadow:0 2px 0 0 rgba(0,0,0,0.2);box-shadow:0 2px 0 0 rgba(0,0,0,0.2);border-radius:0.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right}#copystatus{left:50%;position:absolute;z-index:100}#copystatus div{border-radius:1rem;border:1px solid green;left:-50%;padding:1rem;position:relative;white-space:nowrap}#copystatus div:after{clear:both;content:" ";display:block}#copystatus div.succeeded{background-color:white;border-color:black;color:black}#copystatus div.failed{background-color:white;border-color:#f00;color:#f00}color-samples{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}@media (max-width:992px){color-samples{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);max-width:100%;width:100%}}@media (max-width:576px){color-samples{-ms-grid-columns:auto;grid-template-columns:auto;width:100%;max-width:100%}}color-samples color-sample{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;border:1px solid #CCC;display:-ms-grid;display:grid;font-family:inherit;gap:0.5rem;grid-template-areas:"name      name      name     hex       hex       hex" "name      name      name     rgb       rgb       rgb" "acc       acc       acc      acc       acc       acc" "lighter   lighter   lighter  darker    darker    darker" "notes     notes     notes    notes     notes     notes";-ms-grid-columns:1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr;grid-template-columns:repeat(6,1fr);-ms-grid-rows:1.5rem 0.5rem 1.5rem 0.5rem 10rem 0.5rem max-content 0.5rem max-content 0.5rem max-content;grid-template-rows:repeat(2,1.5rem) 10rem repeat(3,-webkit-max-content);grid-template-rows:repeat(2,1.5rem) 10rem repeat(3,max-content);padding:1rem;width:20rem;max-width:318px}@media (max-width:992px){color-samples color-sample{width:100%;max-width:100%}}color-samples color-sample name{-ms-grid-row:1;-ms-grid-row-span:3;-ms-grid-column:1;-ms-grid-column-span:5;-ms-grid-row-align:start;align-self:start;font-size:1.25rem;grid-area:name}color-samples color-sample name span{cursor:pointer}color-samples color-sample rgb{-ms-grid-row:3;-ms-grid-column:7;-ms-grid-column-span:5;grid-area:rgb;white-space:nowrap}color-samples color-sample hex{-ms-grid-row:1;-ms-grid-column:7;-ms-grid-column-span:5;grid-area:hex;white-space:nowrap}color-samples color-sample>accessibility{border-bottom:1px solid #ccc;border-top:1px solid #ccc}color-samples color-sample accessibility{-ms-grid-row:5;-ms-grid-column:1;-ms-grid-column-span:11;grid-area:acc;-ms-grid-row:3;grid-row:3;padding:0.5rem 0;display:-ms-grid;display:grid;gap:0.5rem;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:2.5rem (-webkit-max-content)[2];-ms-grid-rows:2.5rem (max-content)[2];grid-template-rows:2.5rem repeat(2,-webkit-max-content);grid-template-rows:2.5rem repeat(2,max-content)}color-samples color-sample accessibility .result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);border:1px solid #ccc;padding:0 1rem;text-align:center}color-samples color-sample accessibility .result.accwaa,color-samples color-sample accessibility .result.accwaaa{background-color:white;color:black}color-samples color-sample accessibility .result.accbaa,color-samples color-sample accessibility .result.accbaaa{background-color:black;color:white}color-samples color-sample accessibility .result span:nth-child(2){font-size:2rem}color-samples color-sample accessibility .aa,color-samples color-sample accessibility .aaa{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;display:block;font-size:0.75rem}color-samples color-sample accessibility .acchb{-ms-grid-column:2;grid-column:2}color-samples color-sample accessibility .acchb,color-samples color-sample accessibility .acchw{display:-ms-grid;display:grid;grid-tempate-columns:auto;-ms-grid-rows:(-webkit-max-content)[2];-ms-grid-rows:(max-content)[2];grid-template-rows:repeat(2,-webkit-max-content);grid-template-rows:repeat(2,max-content);-ms-grid-row-align:start;align-self:start;text-align:center;padding:0}color-samples color-sample accessibility .acchb span,color-samples color-sample accessibility .acchw span{-ms-grid-row:1;grid-row:1;grid-column:1/-1;font-size:0.9rem}color-samples color-sample accessibility .acchb small,color-samples color-sample accessibility .acchw small{text-align:center;-ms-grid-row:2;grid-row:2;grid-column:1/-1;font-size:0.75rem}color-samples color-sample sample-block{-ms-grid-row-align:start;align-self:start;-ms-grid-column-span:3;grid-column:span 3;-ms-grid-row:4;grid-row:4}color-samples color-sample sample-block color-pill{display:-ms-grid;display:grid;grid-gap:0.5rem;-ms-grid-columns:20px -webkit-max-content auto;-ms-grid-columns:20px max-content auto;grid-template-columns:20px -webkit-max-content auto;grid-template-columns:20px max-content auto}color-samples color-sample sample-block color-pill :first-child{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;border-radius:5px;border:1px solid #CCC;display:inline-block;height:10px;width:20px}color-samples color-sample sample-block color-pill span{cursor:pointer}color-samples color-sample sample-block color-pill span .tooltip-tc{padding:0.5rem;width:20rem;max-width:318px;height:10.5rem;display:-ms-grid;display:grid;gap:0.5rem;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:(-webkit-max-content)[3];-ms-grid-rows:(max-content)[3];grid-template-rows:repeat(3,-webkit-max-content);grid-template-rows:repeat(3,max-content)}color-samples color-sample sample-block color-pill span .tooltip-tc .result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);border:1px solid #ccc;padding:0 1rem;text-align:center}color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaa,color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaaa{background-color:white;color:black}color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaa,color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaaa{background-color:black;color:white}color-samples color-sample sample-block color-pill span .tooltip-tc .result span{border:none}color-samples color-sample sample-block color-pill span .tooltip-tc .result span:nth-child(2){font-size:2rem}color-samples color-sample sample-block color-pill span .tooltip-tc .aa,color-samples color-sample sample-block color-pill span .tooltip-tc .aaa{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;display:block;font-size:0.75rem}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb{-ms-grid-column:2;grid-column:2}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw{border:none;display:block;width:100%;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span{border:none;font-size:0.9rem;width:100%}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span:after,color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span:before,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span:after,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span:before{display:none}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb small,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw small{font-size:0.75rem;text-align:center}color-samples color-sample notes{border-top:1px solid #ccc;grid-column:1/-1;padding-top:0.5rem}[role=tooltip]{background:#fff;border-radius:0.5rem;color:#000;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));font-size:1rem;font-weight:400;inline-size:-webkit-max-content;inline-size:-moz-max-content;inline-size:max-content;line-height:initial;margin:0;max-inline-size:25rem;opacity:0;padding:0.75rem 1.5rem;pointer-events:none;position:absolute;text-align:start;-webkit-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-ms-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-webkit-transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease,-webkit-transform 0.2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:filter;z-index:10}[role=tooltip]:before{clip-path:inset(50%);clip:rect(1px,1px,1px,1px);content:"; Has tooltip: ";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}[role=tooltip]:after{background:#fff;content:"";inset:0;-webkit-mask:var(--tooltip-pointer);mask:var(--tooltip-pointer);position:absolute;z-index:-1}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]),[tip-position=bottom],[tip-position=block-end]){text-align:center}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])){inset-inline-start:50%;inset-block-end:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])):after{--tooltip-pointer:conic-gradient(from -30deg at bottom,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) bottom/100% 50% no-repeat;inset-block-end:-1rem;-webkit-border-after:1rem solid transparent;border-block-end:1rem solid transparent}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]){inset-inline-start:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]):after{--tooltip-pointer:conic-gradient(from 60deg at left,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) left/50% 100% no-repeat;inset-inline-start:-1rem;-webkit-border-start:1rem solid transparent;border-inline-start:1rem solid transparent}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]){inset-inline-start:50%;inset-block-start:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]):after{--tooltip-pointer:conic-gradient(from 150deg at top,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) top/100% 50% no-repeat;inset-block-start:-1rem;-webkit-border-before:1rem solid transparent;border-block-start:1rem solid transparent}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]){inset-inline-end:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]):after{--tooltip-pointer:conic-gradient(from -120deg at right,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) right/50% 100% no-repeat;inset-inline-end:-1rem;-webkit-border-end:1rem solid transparent;border-inline-end:1rem solid transparent}@media (prefers-color-scheme:dark){[role=tooltip]{background:#1f2127;color:#fff;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5))}[role=tooltip]:after{background:#1f2127}}:has(>[role=tooltip]){position:relative}:has(>[role=tooltip]):is(:hover,:focus-visible,:active)>[role=tooltip]{opacity:1;-webkit-transition-delay:300ms;transition-delay:300ms}@media (prefers-reduced-motion:no-preference){:has(>[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]))):not(:hover):not(:active) [role=tooltip]{--tooltip-y:3px}:has(>[role=tooltip]:is([tip-position=right],[tip-position=inline-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * -3px * -1)}:has(>[role=tooltip]:is([tip-position=bottom],[tip-position=block-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-y:-3px}:has(>[role=tooltip]:is([tip-position=left],[tip-position=inline-start])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * 3px * -1)}}sticky-note-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid transparent;border-radius:50%;display:inline-block;height:0.5rem;position:relative;width:0.5rem}sticky-note-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box}sticky-note-wrapper sticky-note{cursor:-webkit-grab;cursor:grab;display:-ms-grid;display:grid;float:left;font-size:1rem;height:13rem;left:0;place-items:stretch;position:absolute;top:0;width:13rem;z-index:100}sticky-note-wrapper sticky-note:active{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}sticky-note-wrapper sticky-note.right{float:right}sticky-note-wrapper sticky-note>div{-ms-grid-row:1;grid-row:1;-ms-grid-column:1;grid-column:1}sticky-note-wrapper sticky-note>div:first-child{background-color:rgba(0,0,0,0.25);-webkit-box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);display:-ms-grid;display:grid;margin:2rem 1rem 0.25rem 0.36rem;width:calc(100% - 1rem)}sticky-note-wrapper sticky-note>div:nth-child(2){clip-path:url(#stickyClip);display:-ms-grid;display:grid;font-family:"Kalam",cursive;font-style:1rem;font-weight:300;line-height:1.25rem;padding:1rem;place-items:center;text-align:center}sticky-note-wrapper sticky-note>div:nth-child(2)>*{font-family:"Kalam",cursive!important;font-style:normal!important;font-weight:300!important}@media screen and (max-width:1024px){sticky-note-wrapper sticky-note>div:nth-child(2){max-width:13rem;min-width:13rem;width:1rem}}@media screen and (max-width:768px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:1.75rem;max-width:21rem;min-height:21rem}}@media screen and (max-width:640px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:2.5rem;max-width:26rem;min-height:26rem}}sticky-note-wrapper sticky-note>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#ffffdd),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,#ffffc9),to(#ffffba));background:linear-gradient(180deg,#ffffdd 0%,#ffffd3 2%,#ffffd3 12%,#ffffc9 75%,#ffffba 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#9dddec),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,#8bd7e8),to(#7fd3e6));background:linear-gradient(180deg,#9dddec 0%,#94daea 2%,#94daea 12%,#8bd7e8 75%,#7fd3e6 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#fa7c93),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,#fa6883),to(#f95977));background:linear-gradient(180deg,#fa7c93 0%,#fa728b 2%,#fa728b 12%,#fa6883 75%,#f95977 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#c5fcc9),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,#b1fab7),to(#a3faaa));background:linear-gradient(180deg,#c5fcc9 0%,#bbfbc0 2%,#bbfbc0 12%,#b1fab7 75%,#a3faaa 100%)}sticky-note-wrapper:has(sticky-note:hover){background-color:#ffffd3;border:1px solid black}sticky-note-wrapper:has(sticky-note.yellow:hover){background-color:#ffffd3}sticky-note-wrapper:has(sticky-note.blue:hover){background-color:#94daea}sticky-note-wrapper:has(sticky-note.pink:hover){background-color:#fa728b}sticky-note-wrapper:has(sticky-note.green:hover){background-color:#bbfbc0}div.status-report p.heading,div.status-report td[colspan="2"]{font-size:1.125rem;font-weight:bolder!important;grid-column:1/-1;margin:2rem 0 0.5rem 0;padding-top:1.5rem!important}div.status-report td:not([colspan="2"]) span{display:-ms-grid;display:grid;-ms-grid-columns:auto 1rem;grid-template-columns:auto 1rem;margin:0 1rem 0 0}div.status-report td:not([colspan="2"]) span span[class^=status]:after{height:1rem!important;width:1rem!important;margin-right:1rem}div.status-report td:not([colspan="2"]) a{margin:0 1rem 0 0}div.status-report td:not([colspan="2"]).indent a{margin:0 1rem 0 1.5rem}*{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-family:Helvetica,Arial,sans-serif;font-size:14pt}@media (max-width:768px){html{font-size:16pt}}html.show-breakpoints body:after,html.show-breakpoints body:before{background-color:#555;color:white;content:"bigger than extra large";display:-ms-grid;display:grid;font-family:sans-serif;font-size:25px;-ms-grid-columns:auto;grid-template-columns:auto;padding:25px;place-content:center}@media (max-width:1200px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"extra large"}}@media (max-width:992px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"large"}}@media (max-width:768px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"medium"}}@media (max-width:576px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"small"}}article[data-status=deprecated]:not(.show-deprecated){display:none}body{margin:0;padding:0}body a.skip{position:absolute;left:-9999px}body .container{display:-ms-grid;display:grid;-ms-grid-columns:auto (22rem)[2] auto;grid-template-columns:auto repeat(2,22rem) auto;margin:0 auto;width:100vw}body .container header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}body .container header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}body .container header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}body .container header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}body .container header>div .header-title h1{margin:0;padding:0 1rem}body .container header>div .header-title h1 a,body .container header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}body .container nav{background-color:var(--colour-blue);-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;display:none}body .container nav ul{margin:1rem 0}body .container nav ul li{display:inline-block;margin-right:1rem}body .container nav a{color:var(--colour-white);text-decoration:none}@media (min-width:768px){body .container nav{display:initial}}body .container p.info-switches{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-ms-grid;display:grid;gap:0.25rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;-ms-grid-row:3;grid-row:3;-ms-grid-columns:auto (-webkit-max-content)[2];-ms-grid-columns:auto (max-content)[2];grid-template-columns:auto repeat(2,-webkit-max-content);grid-template-columns:auto repeat(2,max-content);text-align:right}body .container p.info-switches [role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}body .container p.info-switches [role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}body .container p.info-switches [role=switch][aria-checked=true]{background-color:#2e51a1}body .container p.info-switches [role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}body .container p.info-switches label{text-align:left}body .container main{display:block;grid-column:1/-1;-ms-grid-row:4;grid-row:4}@media (max-width:768px){body .container main{-ms-grid-row:3;grid-row:3;padding:0}}@supports (grid-area:auto){body .container main{display:grid;grid-template-columns:1rem repeat(2,auto) 1rem}@media (min-width:768px){body .container main{grid-template-columns:auto repeat(2,22rem) auto}}}body .container main h1,body .container main h2,body .container main h3,body .container main h4,body .container main h5,body .container main h6{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4}body .container main article{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;margin-top:2rem;min-width:0}body .container main article.status-deprecated{display:none}@media (min-width:450px){body .container main article .tab-group,body .container main article tabset{margin:2rem 0 1rem 0}}body .container main article .tab-group>ul,body .container main article tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}body .container main article .tab-group>ul li.separator,body .container main article tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}body .container main article .tab-group .tab-hidden,body .container main article tabset .tab-hidden{display:none}body .container main article .tab-group [role=tab],body .container main article tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}body .container main article .tab-group [role=tab]:last-of-type,body .container main article tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}body .container main article .tab-group [role=tab]:not(.selected),body .container main article tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}body .container main article .tab-group [role=tab] span,body .container main article tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}body .container main article .tab-group [role=tabpanel],body .container main article tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){body .container main article .tab-group [role=tabpanel][open] summary,body .container main article tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){body .container main article .tab-group [role=tabpanel]:not(.open),body .container main article tabset [role=tabpanel]:not(.open){display:none}}body .container main article .tab-group [role=tabpanel] pre,body .container main article tabset [role=tabpanel] pre{background-color:var(--colour-black-5);font-size:0.8rem}body .container main article .tab-group [role=tabpanel] pre code:not(.inline),body .container main article tabset [role=tabpanel] pre code:not(.inline){display:block;width:100%}@media (max-width:450px){body .container main article .tab-group:has(details) [role=tablist],body .container main article tabset:has(details) [role=tablist]{display:none}body .container main article .tab-group:has(details) [role=tabpanel],body .container main article tabset:has(details) [role=tabpanel]{border:none}}body .container main article p.switch{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-ms-grid;display:grid;grid-gap:0.5rem;-ms-grid-columns:-webkit-max-content auto;-ms-grid-columns:max-content auto;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto}body .container main article p.switch [role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}body .container main article p.switch [role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}body .container main article p.switch [role=switch][aria-checked=true]{background-color:#2e51a1}body .container main article p.switch [role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}
\ No newline at end of file
diff --git a/public/patterns/core/tabs/index.html b/public/patterns/core/tabs/index.html
index 2dfad97..a991ea0 100644
--- a/public/patterns/core/tabs/index.html
+++ b/public/patterns/core/tabs/index.html
@@ -42,7 +42,7 @@
 	div(tab="[tab title]")
 	div(tab="[tab title]")
 		</pre>
-      <pre class="language-css" tab="css">.tab-group,tabset{margin:2rem 0 1rem 0}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;color:#000;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f;color:#000}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:#7f7f7f solid 1px;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}</pre>
+      <pre class="language-css" tab="css">@media (min-width:450px){.tab-group,tabset{margin:2rem 0 1rem 0}}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){.tab-group [role=tabpanel][open] summary,tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}}@media (max-width:450px){.tab-group:has(details) [role=tablist],tabset:has(details) [role=tablist]{display:none}.tab-group:has(details) [role=tabpanel],tabset:has(details) [role=tabpanel]{border:none}}</pre>
       <div tab="scss">
         <pre class="language-sass">@import "scss/core/tabs/_tabs";
 @include tabs{ 
@@ -52,23 +52,23 @@
         <pre class="language-sass">//		DS2 core (c) 2024 Alexander McIlwraith 
 //		Licensed under CC BY-SA 4.0 
 
+
 $tab-border: #7f7f7f !default; 
-$tab-panel-background-color: #FFF !default;
-$tab-panel-top-border: #7f7f7f !default;
-$tab-panel-top-border-width: 1px !default;
 $tab-selected: #FFF !default;
-$tab-selected-text: #000 !default;
 $tab-notselected: #f0f0f0 !default;
-$tab-notselected-text: #000 !default;
+$tab-break: 450px !default;
 
 @mixin tabs {
 	tabset, .tab-group {
-		margin: 2rem 0 1rem 0;
+		@media (min-width: $tab-break) {
+			margin: 2rem 0 1rem 0;
+		}
 		> ul {
 			display: flex;
 			margin: 0;
 			padding: 0;
 
+
 			li.separator {	
 				border-bottom: 1px solid $tab-border;
 				border-left: 1px solid $tab-border;
@@ -78,6 +78,8 @@ $tab-notselected-text: #000 !default;
 			}
 		}
 
+
+
 		.tab-hidden {
 			display: none;
 		}
@@ -85,12 +87,11 @@ $tab-notselected-text: #000 !default;
 		[role="tab"] {
 			background-color: $tab-selected;
 			border-left: 1px solid $tab-border;
-			border-radius: .5rem .5rem 0 0;
 			border-top: 1px solid $tab-border;
-			color: $tab-selected-text;
+			border-radius: .5rem .5rem 0 0;
 			cursor:pointer;
-			display: inline;
 			margin: 0;
+			display: inline;
 			padding: 1rem 1.5rem .14rem 1.5rem;
 			z-index: 2;
 			
@@ -101,7 +102,6 @@ $tab-notselected-text: #000 !default;
 			&:not(.selected) {
 				background-color: $tab-notselected;
 				border-bottom: 1px solid $tab-border;
-				color: $tab-notselected-text;
 			}
 
 			span {
@@ -111,17 +111,41 @@ $tab-notselected-text: #000 !default;
 
 		}
 		[role="tabpanel"] {
-			background-color: $tab-panel-background-color;
+			background-color: $tab-selected;
 			border: 1px solid $tab-border;
-			border-top: $tab-panel-top-border solid $tab-panel-top-border-width;
+			border-top: none;
 			padding: 1rem;
 			z-index: 1;
 
-			&:not(.open) {
-				display: none;
+			@media (min-width: $tab-break) {
+				&[open] summary {
+					display: none;
+				}
+			}
+
+			@media (min-width: $tab-break) {
+				&:not(.open) {
+					display: none;
+				}
 			}
 			@content;
+
 		}
+
+		@media (max-width: $tab-break) {
+			&:has(details) {
+				[role="tablist"] {
+					display: none;
+				}
+
+				[role="tabpanel"] {
+					border: none;
+				}
+			}
+
+
+		}
+
 	}
 }</pre>
       </div>
@@ -160,28 +184,53 @@ const waitForElement = (selector) => {
     });
 }
 
+let tabsetCount = 0;
 
 export function init(container = document, spacer = true, args = {}) { 
 
 	container.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
 
 		if (tabGroup.querySelector("[role=tablist]") === null) {
+			if (tabGroup.getAttribute("id") == null) {
+				tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
+				tabsetCount++;
+			}
+
+
 			const tabgroup = tabGroup.getAttribute("id");
 			let tablist = "";
 
 			Array.from(tabGroup.children).forEach(child => {
-				const tab = child.getAttribute("tab") || child.getAttribute("data-tab");
+
+				// is details? 
+				let dtls = child.nodeName == "DETAILS" ? true : false;
+
+				// get the tab text 
+				let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
+
+				// if the tab text is not blank 
 				if (tab !== null) {
 					const tabID = tab.replace(/\W+/g, "-").toLowerCase();
-					const tabPanel = document.createElement('div');
+					
+
+					// define the tab panel content
+					let tabPanel = null;
+					if (dtls) { 
+						tabPanel = child;
+						tabPanel.setAttribute("open", "");
+					} else {
+						tabPanel = document.createElement('div');
+						tabPanel.appendChild(child.cloneNode(true));
+					}
+
 					tabPanel.id = `tab-panel-${tabgroup}-${tabID}`;
 					tabPanel.className = tablist === "" ? "open" : "";
 					tabPanel.setAttribute("role", "tabpanel");
 					tabPanel.setAttribute("tabindex", "0");
 					tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`);
-					tabPanel.appendChild(child.cloneNode(true));
 					child.parentNode.replaceChild(tabPanel, child);
-					tablist += `<li tabindex="0" role="tab" ${tablist === "" ? "class='selected'" : ""} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
+					let cls = tablist === "" ? "class='selected'" : "";
+					tablist += `<li tabindex="0" role="tab" ${cls} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
 				} else {
 					child.classList.add("tab-hidden");
 				}
@@ -193,25 +242,32 @@ export function init(container = document, spacer = true, args = {}) {
 			tabGroup.insertBefore(ul, tabGroup.firstChild);
 
 			tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
-				tab.addEventListener("click", (e) => {
-					if (e.altKey && typeof args.altModifier == "function") {
-						args.altModifier(tab);
-					} else if (e.shiftKey && typeof args.shiftModifier == "function") {
-						args.shiftModifier(tab);
-					} else if (e.metaKey && typeof args.metaModifier == "function") {
-						args.metaModifier(tab);
-					} else {
-						const siblings = Array.from(tab.parentNode.children);
-						siblings.forEach(sibling => sibling.classList.remove("selected"));
-						tab.classList.add("selected");
+				tab.addEventListener("click", (evt) => {
+					// if (evt.altKey && typeof args.altModifier == "function") {
+					// 	args.altModifier(tab, evt);
+					// } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
+					// 	args.shiftModifier(tab, evt);
+					// } else if (evt.metaKey && typeof args.metaModifier == "function") {
+					// 	args.metaModifier(tab, evt);
+					// } else {
+					const siblings = Array.from(tab.parentNode.children);
+					siblings.forEach(sibling => sibling.classList.remove("selected"));
+					tab.classList.add("selected");
 
-						const tabPanels = Array.from(tab.parentNode.parentNode.children)
-											   .filter(child => child.getAttribute("role") === "tabpanel");
-						tabPanels.forEach(panel => panel.classList.remove("open"));
 
-						const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
-						document.getElementById(tabPanelId).classList.add("open");
-					}
+					let urlPath = window.location;
+					urlPath.hash = evt.currentTarget.getAttribute("id");
+					window.history.pushState({"pageTitle": window.title + " : " + evt.currentTarget.innerHTML},"", urlPath.toString());
+					// window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
+
+
+					const tabPanels = Array.from(tab.parentNode.parentNode.children)
+										   .filter(child => child.getAttribute("role") === "tabpanel");
+					tabPanels.forEach(panel => panel.classList.remove("open"));
+
+					const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
+					document.getElementById(tabPanelId).classList.add("open");
+					//}
 				});
 
 
@@ -230,11 +286,18 @@ export function init(container = document, spacer = true, args = {}) {
 				el.focus();
 				el.dispatchEvent(click);
 			});
-
 		}
 	});
-}
-</pre>
+
+	addEventListener("hashchange", (evt) => {
+		document.querySelector(window.location.hash).dispatchEvent(click);
+
+		// window.location.hash
+		// console.log(window.location.hash)
+	 })
+
+
+}</pre>
       </div>
     </tabset>
   </body>
diff --git a/src/pg/patterns/core/tabs/_tabs.js b/src/pg/patterns/core/tabs/_tabs.js
index 4283871..b23b031 100644
--- a/src/pg/patterns/core/tabs/_tabs.js
+++ b/src/pg/patterns/core/tabs/_tabs.js
@@ -30,29 +30,53 @@ const waitForElement = (selector) => {
     });
 }
 
+let tabsetCount = 0;
 
 export function init(container = document, spacer = true, args = {}) { 
 
 	container.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
 
 		if (tabGroup.querySelector("[role=tablist]") === null) {
+			if (tabGroup.getAttribute("id") == null) {
+				tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
+				tabsetCount++;
+			}
+
+
 			const tabgroup = tabGroup.getAttribute("id");
 			let tablist = "";
 
 			Array.from(tabGroup.children).forEach(child => {
-				const tab = child.getAttribute("tab") || child.getAttribute("data-tab");
+
+				// is details? 
+				let dtls = child.nodeName == "DETAILS" ? true : false;
+
+				// get the tab text 
+				let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
+
+				// if the tab text is not blank 
 				if (tab !== null) {
 					const tabID = tab.replace(/\W+/g, "-").toLowerCase();
-					const tabPanel = document.createElement('div');
+					
+
+					// define the tab panel content
+					let tabPanel = null;
+					if (dtls) { 
+						tabPanel = child;
+						tabPanel.setAttribute("open", "");
+					} else {
+						tabPanel = document.createElement('div');
+						tabPanel.appendChild(child.cloneNode(true));
+					}
+
 					tabPanel.id = `tab-panel-${tabgroup}-${tabID}`;
 					tabPanel.className = tablist === "" ? "open" : "";
 					tabPanel.setAttribute("role", "tabpanel");
 					tabPanel.setAttribute("tabindex", "0");
 					tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`);
-					tabPanel.appendChild(child.cloneNode(true));
 					child.parentNode.replaceChild(tabPanel, child);
 					let cls = tablist === "" ? "class='selected'" : "";
-					tablist += `<li tabindex="0" role="tab" ${cls}="" id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
+					tablist += `<li tabindex="0" role="tab" ${cls} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
 				} else {
 					child.classList.add("tab-hidden");
 				}
@@ -65,24 +89,31 @@ export function init(container = document, spacer = true, args = {}) {
 
 			tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
 				tab.addEventListener("click", (evt) => {
-					if (evt.altKey && typeof args.altModifier == "function") {
-						args.altModifier(tab, evt);
-					} else if (evt.shiftKey && typeof args.shiftModifier == "function") {
-						args.shiftModifier(tab, evt);
-					} else if (evt.metaKey && typeof args.metaModifier == "function") {
-						args.metaModifier(tab, evt);
-					} else {
-						const siblings = Array.from(tab.parentNode.children);
-						siblings.forEach(sibling => sibling.classList.remove("selected"));
-						tab.classList.add("selected");
+					// if (evt.altKey && typeof args.altModifier == "function") {
+					// 	args.altModifier(tab, evt);
+					// } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
+					// 	args.shiftModifier(tab, evt);
+					// } else if (evt.metaKey && typeof args.metaModifier == "function") {
+					// 	args.metaModifier(tab, evt);
+					// } else {
+					const siblings = Array.from(tab.parentNode.children);
+					siblings.forEach(sibling => sibling.classList.remove("selected"));
+					tab.classList.add("selected");
 
-						const tabPanels = Array.from(tab.parentNode.parentNode.children)
-											   .filter(child => child.getAttribute("role") === "tabpanel");
-						tabPanels.forEach(panel => panel.classList.remove("open"));
 
-						const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
-						document.getElementById(tabPanelId).classList.add("open");
-					}
+					let urlPath = window.location;
+					urlPath.hash = evt.currentTarget.getAttribute("id");
+					window.history.pushState({"pageTitle": window.title + " : " + evt.currentTarget.innerHTML},"", urlPath.toString());
+					// window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
+
+
+					const tabPanels = Array.from(tab.parentNode.parentNode.children)
+										   .filter(child => child.getAttribute("role") === "tabpanel");
+					tabPanels.forEach(panel => panel.classList.remove("open"));
+
+					const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
+					document.getElementById(tabPanelId).classList.add("open");
+					//}
 				});
 
 
@@ -103,4 +134,13 @@ export function init(container = document, spacer = true, args = {}) {
 			});
 		}
 	});
+
+	addEventListener("hashchange", (evt) => {
+		document.querySelector(window.location.hash).dispatchEvent(click);
+
+		// window.location.hash
+		// console.log(window.location.hash)
+	 })
+
+
 }
\ No newline at end of file
diff --git a/src/pg/patterns/core/tabs/_tabs.scss b/src/pg/patterns/core/tabs/_tabs.scss
index 429f90d..46398d9 100644
--- a/src/pg/patterns/core/tabs/_tabs.scss
+++ b/src/pg/patterns/core/tabs/_tabs.scss
@@ -1,75 +1,99 @@
-//		DS2 core (c) 2024 Alexander McIlwraith 
-//		Licensed under CC BY-SA 4.0 
-
-$tab-border: #7f7f7f !default; 
-$tab-panel-background-color: #FFF !default;
-$tab-panel-top-border: #7f7f7f !default;
-$tab-panel-top-border-width: 1px !default;
-$tab-selected: #FFF !default;
-$tab-selected-text: #000 !default;
-$tab-notselected: #f0f0f0 !default;
-$tab-notselected-text: #000 !default;
-
-@mixin tabs {
-	tabset, .tab-group {
-		margin: 2rem 0 1rem 0;
-		> ul {
-			display: flex;
-			margin: 0;
-			padding: 0;
-
-			li.separator {	
-				border-bottom: 1px solid $tab-border;
-				border-left: 1px solid $tab-border;
-				display: inline-block;
-				margin: .45rem 0 0 0;
-				width: 100%;
-			}
-		}
-
-		.tab-hidden {
-			display: none;
-		}
-
-		[role="tab"] {
-			background-color: $tab-selected;
-			border-left: 1px solid $tab-border;
-			border-radius: .5rem .5rem 0 0;
-			border-top: 1px solid $tab-border;
-			color: $tab-selected-text;
-			cursor:pointer;
-			display: inline;
-			margin: 0;
-			padding: 1rem 1.5rem .14rem 1.5rem;
-			z-index: 2;
-			
-			&:last-of-type {
-				border-right: 1px solid $tab-border;
-			}
-
-			&:not(.selected) {
-				background-color: $tab-notselected;
-				border-bottom: 1px solid $tab-border;
-				color: $tab-notselected-text;
-			}
-
-			span {
-				display: block;
-				margin: 0 0 .5rem 0;
-			}
-
-		}
-		[role="tabpanel"] {
-			background-color: $tab-panel-background-color;
-			border: 1px solid $tab-border;
-			border-top: $tab-panel-top-border solid $tab-panel-top-border-width;
-			padding: 1rem;
-			z-index: 1;
-
-			&:not(.open) {
-				display: none;
-			}
-			@content;
-		}
-	}
+//		DS2 core (c) 2024 Alexander McIlwraith 
+//		Licensed under CC BY-SA 4.0 
+
+
+$tab-border: #7f7f7f !default; 
+$tab-selected: #FFF !default;
+$tab-notselected: #f0f0f0 !default;
+$tab-break: 450px !default;
+
+@mixin tabs {
+	tabset, .tab-group {
+		@media (min-width: $tab-break) {
+			margin: 2rem 0 1rem 0;
+		}
+		> ul {
+			display: flex;
+			margin: 0;
+			padding: 0;
+
+
+			li.separator {	
+				border-bottom: 1px solid $tab-border;
+				border-left: 1px solid $tab-border;
+				display: inline-block;
+				margin: .45rem 0 0 0;
+				width: 100%;
+			}
+		}
+
+
+
+		.tab-hidden {
+			display: none;
+		}
+
+		[role="tab"] {
+			background-color: $tab-selected;
+			border-left: 1px solid $tab-border;
+			border-top: 1px solid $tab-border;
+			border-radius: .5rem .5rem 0 0;
+			cursor:pointer;
+			margin: 0;
+			display: inline;
+			padding: 1rem 1.5rem .14rem 1.5rem;
+			z-index: 2;
+			
+			&:last-of-type {
+				border-right: 1px solid $tab-border;
+			}
+
+			&:not(.selected) {
+				background-color: $tab-notselected;
+				border-bottom: 1px solid $tab-border;
+			}
+
+			span {
+				display: block;
+				margin: 0 0 .5rem 0;
+			}
+
+		}
+		[role="tabpanel"] {
+			background-color: $tab-selected;
+			border: 1px solid $tab-border;
+			border-top: none;
+			padding: 1rem;
+			z-index: 1;
+
+			@media (min-width: $tab-break) {
+				&[open] summary {
+					display: none;
+				}
+			}
+
+			@media (min-width: $tab-break) {
+				&:not(.open) {
+					display: none;
+				}
+			}
+			@content;
+
+		}
+
+		@media (max-width: $tab-break) {
+			&:has(details) {
+				[role="tablist"] {
+					display: none;
+				}
+
+				[role="tabpanel"] {
+					border: none;
+				}
+			}
+
+
+		}
+
+	}
 }
\ No newline at end of file
diff --git a/src/pg/patterns/core/tabs/tabs.css b/src/pg/patterns/core/tabs/tabs.css
index 6144568..9a3da3d 100644
--- a/src/pg/patterns/core/tabs/tabs.css
+++ b/src/pg/patterns/core/tabs/tabs.css
@@ -1 +1 @@
-.tab-group,tabset{margin:2rem 0 1rem 0}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;color:#000;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f;color:#000}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:#7f7f7f solid 1px;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}
\ No newline at end of file
+@media (min-width:450px){.tab-group,tabset{margin:2rem 0 1rem 0}}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){.tab-group [role=tabpanel][open] summary,tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}}@media (max-width:450px){.tab-group:has(details) [role=tablist],tabset:has(details) [role=tablist]{display:none}.tab-group:has(details) [role=tabpanel],tabset:has(details) [role=tabpanel]{border:none}}
\ No newline at end of file
diff --git a/src/scss/scaffolding.scss b/src/scss/scaffolding.scss
index 9c0a457..657ccc7 100644
--- a/src/scss/scaffolding.scss
+++ b/src/scss/scaffolding.scss
@@ -27,7 +27,15 @@ $tooltip-dark-allow: false;
 @use "../pg/patterns/core/header/_header";
 @use "../pg/patterns/core/tabs/_tabs"; 
 @use "../pg/patterns/core/status/_status";
-use
+
+
+@include core.core-colour-samples;
+@include tooltip.tooltip;
+@include sticky-note.sticky-note;
+@include status.status;
+
+
+
 * {
 	box-sizing: border-box;
 }
@@ -43,11 +51,7 @@ html {
 	}
 }
 
-@include core.core-colour-samples;
 
-@include tooltip.tooltip;
-@include sticky-note.sticky-note;
-@include status.status;
 
 article[data-status=deprecated]:not(.show-deprecated) {
 	display: none;