Prettier: reflow visual-specimen.html

docs/architecture/visual-specimen.html

@@ -966,20 +966,46 @@
 
         <h3 style="margin-top: var(--space-6)">Emphasis hierarchy — a header cluster</h3>
         <p class="cap" style="margin-bottom: var(--space-4)">
-          Utilities go <strong>ghost</strong> (icon + text, borderless) so they recede;
+          Utilities go <strong>ghost</strong> (icon + text, borderless) so they recede; a divider
-          a divider sets off <strong>Donate</strong> on a <strong>soft-accent</strong> wash
+          sets off <strong>Donate</strong> on a <strong>soft-accent</strong> wash — one low-key
-          — one low-key solicitation, no border. (Carbon: one high-emphasis action per
+          solicitation, no border. (Carbon: one high-emphasis action per region; utilities at low
-          region; utilities at low emphasis.)
+          emphasis.)
         </p>
         <div class="row" style="align-items: center">
           <button class="btn btn-ghost-util sm">
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="8" y="18" width="4" height="2"/><rect x="14" y="18" width="4" height="2"/><rect x="8" y="14" width="4" height="2"/><rect x="14" y="22" width="4" height="2"/><rect x="20" y="14" width="4" height="2"/><rect x="20" y="22" width="4" height="2"/><path d="M27,3H5A2.0025,2.0025,0,0,0,3,5V27a2.0025,2.0025,0,0,0,2,2H27a2.0025,2.0025,0,0,0,2-2V5A2.0025,2.0025,0,0,0,27,3Zm0,2,0,4H5V5ZM5,27V11H27l0,16Z"/></svg>Datasets</button>
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <rect x="8" y="18" width="4" height="2" />
+              <rect x="14" y="18" width="4" height="2" />
+              <rect x="8" y="14" width="4" height="2" />
+              <rect x="14" y="22" width="4" height="2" />
+              <rect x="20" y="14" width="4" height="2" />
+              <rect x="20" y="22" width="4" height="2" />
+              <path
+                d="M27,3H5A2.0025,2.0025,0,0,0,3,5V27a2.0025,2.0025,0,0,0,2,2H27a2.0025,2.0025,0,0,0,2-2V5A2.0025,2.0025,0,0,0,27,3Zm0,2,0,4H5V5ZM5,27V11H27l0,16Z"
+              /></svg
+            >Datasets
+          </button>
           <button class="btn btn-ghost-util sm">
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z"/><path d="M6,12l1.41,1.41L15,5.83V24h2V5.83l7.59,7.59L26,12,16,2Z"/></svg>Import</button>
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z" />
+              <path d="M6,12l1.41,1.41L15,5.83V24h2V5.83l7.59,7.59L26,12,16,2Z" /></svg
+            >Import
+          </button>
           <button class="btn btn-ghost-util sm">
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z"/><path d="M26,14l-1.41-1.41L17,20.17V2H15V20.17l-7.59-7.58L6,14l10,10Z"/></svg>Export</button>
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z" />
+              <path d="M26,14l-1.41-1.41L17,20.17V2H15V20.17l-7.59-7.58L6,14l10,10Z" /></svg
+            >Export
+          </button>
           <button class="btn btn-ghost-util sm">
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M17,22V14H13v2h2v6H12v2h8V22Z"/><path d="M16,8a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,8Z"/><path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"/></svg>About</button>
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <path d="M17,22V14H13v2h2v6H12v2h8V22Z" />
+              <path d="M16,8a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,8Z" />
+              <path
+                d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"
+              /></svg
+            >About
+          </button>
           <span class="hdr-divider"></span>
           <button class="btn btn-soft sm">Donate</button>
         </div>
@@ -1052,76 +1078,304 @@
       <section>
         <h2>Iconography — Carbon glyphs, fill: currentColor</h2>
         <div class="cap" style="margin-bottom: var(--space-5)">
-          The controlled vocabulary (arch 09 §5). One glyph per meaning; 16px default, paired
+          The controlled vocabulary (arch 09 §5). One glyph per meaning; 16px default, paired to
-          to 14px body. Filled (not stroked) — they inherit text colour and theme.
+          14px body. Filled (not stroked) — they inherit text colour and theme.
         </div>
         <div class="row" style="gap: var(--space-7); flex-wrap: wrap; align-items: flex-start">
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><polygon points="17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <polygon
+                points="17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16"
+              />
+            </svg>
             <span class="cap">close</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M13.5025,5.4136A15.0755,15.0755,0,0,0,25.096,23.6082a11.1134,11.1134,0,0,1-7.9749,3.3893c-.1385,0-.2782.0051-.4178,0A11.0944,11.0944,0,0,1,13.5025,5.4136M14.98,3a1.0024,1.0024,0,0,0-.1746.0156A13.0959,13.0959,0,0,0,16.63,28.9973c.1641.006.3282,0,.4909,0a13.0724,13.0724,0,0,0,10.702-5.5556,1.0094,1.0094,0,0,0-.7833-1.5644A13.08,13.08,0,0,1,15.8892,4.38,1.0149,1.0149,0,0,0,14.98,3Z"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <path
+                d="M13.5025,5.4136A15.0755,15.0755,0,0,0,25.096,23.6082a11.1134,11.1134,0,0,1-7.9749,3.3893c-.1385,0-.2782.0051-.4178,0A11.0944,11.0944,0,0,1,13.5025,5.4136M14.98,3a1.0024,1.0024,0,0,0-.1746.0156A13.0959,13.0959,0,0,0,16.63,28.9973c.1641.006.3282,0,.4909,0a13.0724,13.0724,0,0,0,10.702-5.5556,1.0094,1.0094,0,0,0-.7833-1.5644A13.08,13.08,0,0,1,15.8892,4.38,1.0149,1.0149,0,0,0,14.98,3Z"
+              />
+            </svg>
             <span class="cap">moon</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="15" y="2" width="2" height="5"/><rect x="21.6675" y="6.8536" width="4.958" height="1.9998" transform="translate(1.5191 19.3744) rotate(-45)"/><rect x="25" y="15" width="5" height="2"/><rect x="23.1466" y="21.6675" width="1.9998" height="4.958" transform="translate(-10.0018 24.1465) rotate(-45)"/><rect x="15" y="25" width="2" height="5"/><rect x="5.3745" y="23.1466" width="4.958" height="1.9998" transform="translate(-14.7739 12.6256) rotate(-45)"/><rect x="2" y="15" width="5" height="2"/><rect x="6.8536" y="5.3745" width="1.9998" height="4.958" transform="translate(-3.253 7.8535) rotate(-45)"/><path d="M16,12a4,4,0,1,1-4,4,4.0045,4.0045,0,0,1,4-4m0-2a6,6,0,1,0,6,6,6,6,0,0,0-6-6Z"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <rect x="15" y="2" width="2" height="5" />
+              <rect
+                x="21.6675"
+                y="6.8536"
+                width="4.958"
+                height="1.9998"
+                transform="translate(1.5191 19.3744) rotate(-45)"
+              />
+              <rect x="25" y="15" width="5" height="2" />
+              <rect
+                x="23.1466"
+                y="21.6675"
+                width="1.9998"
+                height="4.958"
+                transform="translate(-10.0018 24.1465) rotate(-45)"
+              />
+              <rect x="15" y="25" width="2" height="5" />
+              <rect
+                x="5.3745"
+                y="23.1466"
+                width="4.958"
+                height="1.9998"
+                transform="translate(-14.7739 12.6256) rotate(-45)"
+              />
+              <rect x="2" y="15" width="5" height="2" />
+              <rect
+                x="6.8536"
+                y="5.3745"
+                width="1.9998"
+                height="4.958"
+                transform="translate(-3.253 7.8535) rotate(-45)"
+              />
+              <path
+                d="M16,12a4,4,0,1,1-4,4,4.0045,4.0045,0,0,1,4-4m0-2a6,6,0,1,0,6,6,6,6,0,0,0-6-6Z"
+              />
+            </svg>
             <span class="cap">sun</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="8" y="18" width="4" height="2"/><rect x="14" y="18" width="4" height="2"/><rect x="8" y="14" width="4" height="2"/><rect x="14" y="22" width="4" height="2"/><rect x="20" y="14" width="4" height="2"/><rect x="20" y="22" width="4" height="2"/><path d="M27,3H5A2.0025,2.0025,0,0,0,3,5V27a2.0025,2.0025,0,0,0,2,2H27a2.0025,2.0025,0,0,0,2-2V5A2.0025,2.0025,0,0,0,27,3Zm0,2,0,4H5V5ZM5,27V11H27l0,16Z"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <rect x="8" y="18" width="4" height="2" />
+              <rect x="14" y="18" width="4" height="2" />
+              <rect x="8" y="14" width="4" height="2" />
+              <rect x="14" y="22" width="4" height="2" />
+              <rect x="20" y="14" width="4" height="2" />
+              <rect x="20" y="22" width="4" height="2" />
+              <path
+                d="M27,3H5A2.0025,2.0025,0,0,0,3,5V27a2.0025,2.0025,0,0,0,2,2H27a2.0025,2.0025,0,0,0,2-2V5A2.0025,2.0025,0,0,0,27,3Zm0,2,0,4H5V5ZM5,27V11H27l0,16Z"
+              />
+            </svg>
             <span class="cap">dataset</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><polygon points="17,15 17,8 15,8 15,15 8,15 8,17 15,17 15,24 17,24 17,17 24,17 24,15"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <polygon
+                points="17,15 17,8 15,8 15,15 8,15 8,17 15,17 15,24 17,24 17,17 24,17 24,15"
+              />
+            </svg>
             <span class="cap">add</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="12" y="12" width="2" height="12"/><rect x="18" y="12" width="2" height="12"/><path d="M4,6V8H6V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V8h2V6ZM8,28V8H24V28Z"/><rect x="12" y="2" width="8" height="2"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <rect x="12" y="12" width="2" height="12" />
+              <rect x="18" y="12" width="2" height="12" />
+              <path d="M4,6V8H6V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V8h2V6ZM8,28V8H24V28Z" />
+              <rect x="12" y="2" width="8" height="2" />
+            </svg>
             <span class="cap">delete</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z"/><path d="M6,12l1.41,1.41L15,5.83V24h2V5.83l7.59,7.59L26,12,16,2Z"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z" />
+              <path d="M6,12l1.41,1.41L15,5.83V24h2V5.83l7.59,7.59L26,12,16,2Z" />
+            </svg>
             <span class="cap">import</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z"/><path d="M26,14l-1.41-1.41L17,20.17V2H15V20.17l-7.59-7.58L6,14l10,10Z"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z" />
+              <path d="M26,14l-1.41-1.41L17,20.17V2H15V20.17l-7.59-7.58L6,14l10,10Z" />
+            </svg>
             <span class="cap">export</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M17,22V14H13v2h2v6H12v2h8V22Z"/><path d="M16,8a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,8Z"/><path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <path d="M17,22V14H13v2h2v6H12v2h8V22Z" />
+              <path d="M16,8a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,8Z" />
+              <path
+                d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"
+              />
+            </svg>
             <span class="cap">info</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M18,28A12,12,0,1,0,6,16v6.2L2.41,18.59,1,20l6,6,6-6L11.59,18.59,8,22.2V16A10,10,0,1,1,18,26Z"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <path
+                d="M18,28A12,12,0,1,0,6,16v6.2L2.41,18.59,1,20l6,6,6-6L11.59,18.59,8,22.2V16A10,10,0,1,1,18,26Z"
+              />
+            </svg>
             <span class="cap">revert</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <path
+                d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
+              />
+            </svg>
             <span class="cap">search</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M27,16.76c0-.25,0-.5,0-.76s0-.51,0-.77l1.92-1.68A2,2,0,0,0,29.3,11L26.94,7a2,2,0,0,0-1.73-1,2,2,0,0,0-.64.1l-2.43.82a11.35,11.35,0,0,0-1.31-.75l-.51-2.52a2,2,0,0,0-2-1.61H13.64a2,2,0,0,0-2,1.61l-.51,2.52a11.48,11.48,0,0,0-1.32.75L7.43,6.06A2,2,0,0,0,6.79,6,2,2,0,0,0,5.06,7L2.7,11a2,2,0,0,0,.41,2.51L5,15.24c0,.25,0,.5,0,.76s0,.51,0,.77L3.11,18.45A2,2,0,0,0,2.7,21L5.06,25a2,2,0,0,0,1.73,1,2,2,0,0,0,.64-.1l2.43-.82a11.35,11.35,0,0,0,1.31.75l.51,2.52a2,2,0,0,0,2,1.61h4.72a2,2,0,0,0,2-1.61l.51-2.52a11.48,11.48,0,0,0,1.32-.75l2.42.82a2,2,0,0,0,.64.1,2,2,0,0,0,1.73-1L29.3,21a2,2,0,0,0-.41-2.51ZM25.21,24l-3.43-1.16a8.86,8.86,0,0,1-2.71,1.57L18.36,28H13.64l-.71-3.55a9.36,9.36,0,0,1-2.7-1.57L6.79,24,4.43,20l2.72-2.4a8.9,8.9,0,0,1,0-3.13L4.43,12,6.79,8l3.43,1.16a8.86,8.86,0,0,1,2.71-1.57L13.64,4h4.72l.71,3.55a9.36,9.36,0,0,1,2.7,1.57L25.21,8,27.57,12l-2.72,2.4a8.9,8.9,0,0,1,0,3.13L27.57,20Z"/><path d="M16,22a6,6,0,1,1,6-6A5.94,5.94,0,0,1,16,22Zm0-10a3.91,3.91,0,0,0-4,4,3.91,3.91,0,0,0,4,4,3.91,3.91,0,0,0,4-4A3.91,3.91,0,0,0,16,12Z"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <path
+                d="M27,16.76c0-.25,0-.5,0-.76s0-.51,0-.77l1.92-1.68A2,2,0,0,0,29.3,11L26.94,7a2,2,0,0,0-1.73-1,2,2,0,0,0-.64.1l-2.43.82a11.35,11.35,0,0,0-1.31-.75l-.51-2.52a2,2,0,0,0-2-1.61H13.64a2,2,0,0,0-2,1.61l-.51,2.52a11.48,11.48,0,0,0-1.32.75L7.43,6.06A2,2,0,0,0,6.79,6,2,2,0,0,0,5.06,7L2.7,11a2,2,0,0,0,.41,2.51L5,15.24c0,.25,0,.5,0,.76s0,.51,0,.77L3.11,18.45A2,2,0,0,0,2.7,21L5.06,25a2,2,0,0,0,1.73,1,2,2,0,0,0,.64-.1l2.43-.82a11.35,11.35,0,0,0,1.31.75l.51,2.52a2,2,0,0,0,2,1.61h4.72a2,2,0,0,0,2-1.61l.51-2.52a11.48,11.48,0,0,0,1.32-.75l2.42.82a2,2,0,0,0,.64.1,2,2,0,0,0,1.73-1L29.3,21a2,2,0,0,0-.41-2.51ZM25.21,24l-3.43-1.16a8.86,8.86,0,0,1-2.71,1.57L18.36,28H13.64l-.71-3.55a9.36,9.36,0,0,1-2.7-1.57L6.79,24,4.43,20l2.72-2.4a8.9,8.9,0,0,1,0-3.13L4.43,12,6.79,8l3.43,1.16a8.86,8.86,0,0,1,2.71-1.57L13.64,4h4.72l.71,3.55a9.36,9.36,0,0,1,2.7,1.57L25.21,8,27.57,12l-2.72,2.4a8.9,8.9,0,0,1,0,3.13L27.57,20Z"
+              />
+              <path
+                d="M16,22a6,6,0,1,1,6-6A5.94,5.94,0,0,1,16,22Zm0-10a3.91,3.91,0,0,0-4,4,3.91,3.91,0,0,0,4,4,3.91,3.91,0,0,0,4-4A3.91,3.91,0,0,0,16,12Z"
+              />
+            </svg>
             <span class="cap">settings</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="4" y="6" width="24" height="2"/><rect x="4" y="24" width="24" height="2"/><rect x="4" y="6" width="2" height="20"/><rect x="26" y="6" width="2" height="20"/><rect x="7" y="10" width="4" height="12"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <rect x="4" y="6" width="24" height="2" />
+              <rect x="4" y="24" width="24" height="2" />
+              <rect x="4" y="6" width="2" height="20" />
+              <rect x="26" y="6" width="2" height="20" />
+              <rect x="7" y="10" width="4" height="12" />
+            </svg>
             <span class="cap">pane-library</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="4" y="6" width="24" height="2"/><rect x="4" y="24" width="24" height="2"/><rect x="4" y="6" width="2" height="20"/><rect x="26" y="6" width="2" height="20"/><rect x="14" y="10" width="4" height="12"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <rect x="4" y="6" width="24" height="2" />
+              <rect x="4" y="24" width="24" height="2" />
+              <rect x="4" y="6" width="2" height="20" />
+              <rect x="26" y="6" width="2" height="20" />
+              <rect x="14" y="10" width="4" height="12" />
+            </svg>
             <span class="cap">pane-editor</span>
           </span>
-          <span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
+          <span
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="4" y="6" width="24" height="2"/><rect x="4" y="24" width="24" height="2"/><rect x="4" y="6" width="2" height="20"/><rect x="26" y="6" width="2" height="20"/><rect x="21" y="10" width="4" height="12"/></svg>
+            style="
+              display: inline-flex;
+              flex-direction: column;
+              align-items: center;
+              gap: var(--space-2);
+              color: var(--text-secondary);
+            "
+          >
+            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
+              <rect x="4" y="6" width="24" height="2" />
+              <rect x="4" y="24" width="24" height="2" />
+              <rect x="4" y="6" width="2" height="20" />
+              <rect x="26" y="6" width="2" height="20" />
+              <rect x="21" y="10" width="4" height="12" />
+            </svg>
             <span class="cap">pane-preview</span>
           </span>
         </div>
         <div class="cap" style="margin-top: var(--space-6)">
-          The full Core + pane-toggle set (arch 09 §5.2); the four status glyphs appear,
+          The full Core + pane-toggle set (arch 09 §5.2); the four status glyphs appear, coloured,
-          coloured, in the Toasts section below. In context: icon + text is the default;
+          in the Toasts section below. In context: icon + text is the default; icon-only is the
-          icon-only is the universal/affordance/destructive exception. ✕ means close only —
+          universal/affordance/destructive exception. ✕ means close only — delete is the trash
-          delete is the trash glyph.
+          glyph.
         </div>
       </section>
 
@@ -1133,15 +1387,23 @@
           <button aria-selected="false">Details</button>
         </div>
         <div class="cap" style="margin-top: var(--space-2)">
-          Catalog primitive only. The Draft/Published view uses the segmented control (a
+          Catalog primitive only. The Draft/Published view uses the segmented control (a radio
-          radio group), not tabs — see arch/10.
+          group), not tabs — see arch/10.
         </div>
         <div class="row" style="margin-top: var(--space-6)">
           <span class="tag-pill"><span class="dot draft"></span> Draft changes</span>
           <span class="tag-pill"><span class="dot published"></span> Published</span>
           <span class="tag-pill">
             <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
-              <rect x="8" y="18" width="4" height="2" /><rect x="14" y="18" width="4" height="2" /><rect x="8" y="14" width="4" height="2" /><rect x="14" y="22" width="4" height="2" /><rect x="20" y="14" width="4" height="2" /><rect x="20" y="22" width="4" height="2" /><path d="M27,3H5A2.0025,2.0025,0,0,0,3,5V27a2.0025,2.0025,0,0,0,2,2H27a2.0025,2.0025,0,0,0,2-2V5A2.0025,2.0025,0,0,0,27,3Zm0,2,0,4H5V5ZM5,27V11H27l0,16Z" />
+              <rect x="8" y="18" width="4" height="2" />
+              <rect x="14" y="18" width="4" height="2" />
+              <rect x="8" y="14" width="4" height="2" />
+              <rect x="14" y="22" width="4" height="2" />
+              <rect x="20" y="14" width="4" height="2" />
+              <rect x="20" y="22" width="4" height="2" />
+              <path
+                d="M27,3H5A2.0025,2.0025,0,0,0,3,5V27a2.0025,2.0025,0,0,0,2,2H27a2.0025,2.0025,0,0,0,2-2V5A2.0025,2.0025,0,0,0,27,3Zm0,2,0,4H5V5ZM5,27V11H27l0,16Z"
+              />
             </svg>
             2 datasets
           </span>
@@ -1166,9 +1428,8 @@
               <div class="main">
                 <div class="name">Quarterly revenue</div>
                 <div class="sub">
-                  <span class="indicator"><span class="dot draft"></span></span><span
+                  <span class="indicator"><span class="dot draft"></span></span
-                    >Today · 2 KB</span
+                  ><span>Today · 2 KB</span>
-                  >
                 </div>
               </div>
               <button class="del" title="Delete">
@@ -1245,24 +1506,60 @@
       <section>
         <h2>Toasts</h2>
         <div class="cap" style="margin-bottom: var(--space-4)">
-          Filled status glyph + colour + text — a non-colour severity channel (arch 09 §5.2 /
+          Filled status glyph + colour + text — a non-colour severity channel (arch 09 §5.2 / 10
-          10 §3). The triangle shape-codes warning apart from the round error/success/info.
+          §3). The triangle shape-codes warning apart from the round error/success/info.
         </div>
         <div class="stack" style="max-width: 360px">
           <div class="toast info">
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor; flex: none; color: var(--support-info)"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,6a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"/></svg>
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 32 32"
+              style="fill: currentColor; flex: none; color: var(--support-info)"
+            >
+              <path
+                d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,6a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"
+              />
+            </svg>
             Snippet duplicated.
           </div>
           <div class="toast success">
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor; flex: none; color: var(--support-success)"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"/></svg>
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 32 32"
+              style="fill: currentColor; flex: none; color: var(--support-success)"
+            >
+              <path
+                d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"
+              />
+            </svg>
             Published “Quarterly revenue”.
           </div>
           <div class="toast warning">
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor; flex: none; color: var(--support-warning-fg, #8a6d00)"><path d="M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z"/></svg>
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 32 32"
+              style="fill: currentColor; flex: none; color: var(--support-warning-fg, #8a6d00)"
+            >
+              <path
+                d="M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z"
+              />
+            </svg>
             Snippet storage is 82% full.
           </div>
           <div class="toast error">
-            <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor; flex: none; color: var(--support-error)"><path d="M16,2A13.914,13.914,0,0,0,2,16,13.914,13.914,0,0,0,16,30,13.914,13.914,0,0,0,30,16,13.914,13.914,0,0,0,16,2Zm5.4449,21L9,10.5557,10.5557,9,23,21.4448Z"/></svg>
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 32 32"
+              style="fill: currentColor; flex: none; color: var(--support-error)"
+            >
+              <path
+                d="M16,2A13.914,13.914,0,0,0,2,16,13.914,13.914,0,0,0,16,30,13.914,13.914,0,0,0,30,16,13.914,13.914,0,0,0,16,2Zm5.4449,21L9,10.5557,10.5557,9,23,21.4448Z"
+              />
+            </svg>
             Could not save — storage is full.
           </div>
         </div>
@@ -1272,9 +1569,9 @@
       <section>
         <h2>Overlay dialog — confirm / alert</h2>
         <p class="cap">
-          The in-app replacement for <code>window.confirm</code>. Backdrop dims but does NOT
+          The in-app replacement for <code>window.confirm</code>. Backdrop dims but does NOT dismiss
-          dismiss (Carbon transactional rule); danger variant for destructive intent, with Cancel
+          (Carbon transactional rule); danger variant for destructive intent, with Cancel taking
-          taking focus. Behavior lives in
+          focus. Behavior lives in
           <code>docs/architecture/03 → Confirmation &amp; alert dialogs</code>.
         </p>
         <div class="dialog-stage">