@bongos/core 1.19.457 → 1.19.459

package/modules/hall-ui/public/government.css

@@ -1,172 +1,114 @@
-/* government.css — Page-local styles for the Government page (ranks /
-   permissions / assignments — BV1.R111, ADR 0151). Built on the shared design
-   tokens (style.css), mirroring gate.css's card + pill idiom; the ?v= cache-bust
+/* government.css — Page-local styles for the Government page (task 1003469
+   rebuild; the ranks / permissions / assignments surface is BV1.R111, ADR 0151,
+   the three-section IA is ADR 0175). Every panel is the shell's .scroll, every
+   row the oversight family's .ov-row (oversight.css); what lives here is what
+   only this page has — the two-panel Permissions layout, the sitting card of
+   the Board Room and its ballot, and two names a test pins. The ?v= cache-bust
    is stamped from this file's content hash at boot (src/asset-version.js). */
 
-.gov-h { color: var(--ink); font-size: 16px; font-weight: 600; margin: 22px 0 8px; }
-.gov-h--minor { font-size: 13px; margin: 18px 0 6px; }
-.gov-grid-note { color: var(--ink-soft); font-size: 12.5px; margin: 0 0 12px; }
-/* Holds the ladder-rank reset button. Empty for every other rank, so it collapses
-   rather than reserving a gap — hence no margin on the empty box itself. */
-.gov-grid-actions:not(:empty) { margin: 0 0 14px; }
-.gov-sealed, .gov-empty { color: var(--ink-soft); padding: 16px 0; }
-
-/* Two columns on wide screens: rank rail left, permission grid right. */
-.gov-layout { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
-@media (max-width: 760px) { .gov-layout { grid-template-columns: 1fr; } }
-
-/* ---- rank list ---------------------------------------------------------- */
-.gov-rank-list { display: flex; flex-direction: column; gap: 8px; }
-.gov-rank {
-  text-align: left; font: inherit; cursor: pointer;
-  border: var(--line) solid var(--rule-soft); border-radius: var(--radius-sm);
-  background: var(--bg-card); padding: 10px 12px;
-  display: flex; flex-direction: column; gap: 4px;
+/* Two names tests/government_board_room_copy.mjs pins by their literal markup:
+   the panel heading and its one-line lede. They carry the shell's own voice —
+   .scroll__h and .scroll__lede — under the pinned names, so the markup the test
+   reads is the markup the world renders. */
+.gov-h {
+  margin: 0 0 8px;
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: 21px;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+  color: var(--ink);
+  text-shadow: var(--type-halo);
 }
-.gov-rank:hover { background: var(--glass); }
-.gov-rank[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
-.gov-rank__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
-.gov-rank__label { font-weight: 600; color: var(--ink); font-size: 13.5px; }
-.gov-rank__meta { color: var(--ink-faint); font-size: 11.5px; }
-
-/* The base is the shell's .fact-pill (task 1003307) — this sheet's copy spelled
-   the label voice as literals, so it never flipped to the body face in dark.
-   Only the states are the page's own, and a state is a HAIRLINE in its own
-   colour: the archetype's .status carries no fill, so the pill never competes
-   with the row it sits on. */
-.gov-pill--seeded { color: var(--info); }
-.gov-pill--custom { color: var(--ok); }
-.gov-pill--locked { color: var(--danger); }
-.gov-pill--floor { font-variant-numeric: tabular-nums; }
-
-/* ---- permission grid ---------------------------------------------------- */
-.gov-section { margin: 0 0 18px; border: var(--line) solid var(--rule-soft); border-radius: var(--radius); background: var(--bg-card); overflow: hidden; }
-.gov-section__head {
-  padding: 8px 14px; font-size: 11.5px; font-weight: 600;
-  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
-  background: var(--glass); border-bottom: var(--line) solid var(--rule-soft);
+.gov-grid-note { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); max-width: var(--measure); }
+.gov-grid-note strong { color: var(--ink); font-weight: 500; }
+.gov-grid-note code, .ov-row__sub code, .ov-row__title code, .ov-foot code {
+  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere;
 }
-.gov-perm { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: var(--line) solid var(--rule-soft); }
-.gov-perm:last-child { border-bottom: 0; }
-.gov-perm__main { flex: 1 1 auto; min-width: 0; }
-.gov-perm__key {
-  font-family: var(--font-mono); font-size: 12.5px;
-  color: var(--accent-ink); background: var(--glass);
-  padding: 1px 5px; border-radius: 4px;
-}
-.gov-perm__guards { color: var(--ink-soft); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
-
-/* The toggle: a small pill button. Held = filled; not held = outline. */
-.gov-toggle {
-  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
-  padding: 4px 12px; border-radius: var(--radius-pill); white-space: nowrap;
-  border: var(--line) solid var(--rule); background: var(--bg-card); color: var(--ink-soft);
-}
-.gov-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
-.gov-toggle:hover:not(:disabled) { border-color: var(--accent); }
-.gov-toggle:disabled { opacity: 0.55; cursor: default; }
-.gov-held-note { color: var(--ok); font-size: 12px; white-space: nowrap; }
 
-/* ---- create / assign forms ---------------------------------------------- */
-.gov-create, .gov-assign { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
-.gov-assign { flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
-.gov-input {
-  font: inherit; font-size: 13px; color: var(--ink);
-  background: var(--bg-card); border: var(--line) solid var(--rule);
-  border-radius: var(--radius-sm); padding: 7px 10px;
-}
-.gov-input:focus { outline: none; border-color: var(--accent); }
-.gov-input--id { width: 110px; }
-.gov-btn {
-  font: inherit; font-size: 13px; font-weight: 600;
-  padding: 7px 16px; border: var(--line) solid var(--accent);
-  background: var(--accent); color: var(--accent-on);
-  border-radius: var(--radius-sm); cursor: pointer; align-self: flex-start;
-}
-.gov-btn:hover:not(:disabled) { background: var(--accent-lift); border-color: var(--accent-lift); }
-.gov-btn:disabled { opacity: 0.45; cursor: default; }
-.gov-btn--ghost { background: var(--bg-card); color: var(--ink); border-color: var(--rule); }
-.gov-btn--ghost:hover:not(:disabled) { background: var(--glass); }
-.gov-btn--small { font-size: 12px; padding: 4px 10px; }
-
-/* ---- assignments + principals ------------------------------------------ */
-.gov-assign-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: var(--line) solid var(--rule-soft); }
-.gov-assign-row:last-child { border-bottom: 0; }
-.gov-assign-row__who { flex: 1 1 auto; color: var(--ink); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
-.gov-assign-row__who .muted { color: var(--ink-faint); }
-.gov-principal { padding: 8px 14px; border-bottom: var(--line) solid var(--rule-soft); font-size: 12.5px; color: var(--ink-soft); }
-.gov-principal:last-child { border-bottom: 0; }
-.gov-principal code {
-  font-family: var(--font-mono); font-size: 12px;
-  color: var(--accent-ink); background: var(--glass); padding: 1px 5px; border-radius: 4px;
-}
+/* Holds the ladder-rank reset button. Empty for every other rank, so it collapses
+   rather than reserving a gap — hence no margin on the empty box itself. */
+.gov-grid-actions:not(:empty) { margin: 0 0 var(--sp-sm); }
 
-/* ---- the Board Room: one sitting, one decision (task 1003270) -------------
-   The item card is NOT `.gov-section`. It used to be, which meant the title of
-   the idea being voted on rendered through `.gov-section__head` — 11.5px,
-   uppercase, letterspaced, i.e. styled as a table header. Here the title is a
-   title, the ballot sits directly under it, the idea's own words are body text,
-   and the constitutional metadata is the only thing behind a click. */
-.gov-item {
-  margin: 0 0 18px; border: var(--line) solid var(--rule-soft); border-radius: var(--radius);
-  background: var(--bg-card); overflow: hidden;
-}
-.gov-item__head {
-  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
-  gap: 6px 12px; padding: 12px 14px 10px;
-}
-.gov-item__title {
-  margin: 0; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.35;
-  color: var(--ink); overflow-wrap: anywhere;
-}
-.gov-item__title a { color: inherit; }
-.gov-item__state { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
-.gov-item__amend { margin: 0; padding: 0 14px 10px; color: var(--ink-soft); font-size: 12.5px; overflow-wrap: anywhere; }
+/* ---- Permissions: two panels side by side on a wide screen ------------------
+   The rank list is the narrow one; picking a row there fills the wide one. */
+.gov-layout { display: grid; grid-template-columns: 284px minmax(0, 1fr); gap: 0 var(--sp-md); align-items: start; }
+@media (max-width: 900px) { .gov-layout { grid-template-columns: minmax(0, 1fr); } }
 
-/* The primary action, directly under the title — that adjacency is the fix. */
-.gov-item__act { padding: 2px 14px 14px; }
-.gov-item__cast { margin: 0; color: var(--ink-soft); font-size: 12.5px; }
+/* The permission key is the machine's word and the row's title: the mono face in
+   ink, wrapping anywhere so a long key never widens the panel. */
+.gov-perm__key { font-family: var(--font-mono); font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
+.gov-held-note { font-size: 12.5px; color: var(--ok); white-space: nowrap; }
 
-/* The idea itself: open, and set as prose rather than as permission rows. */
-.gov-idea { padding: 12px 14px 2px; border-top: var(--line) solid var(--rule-soft); }
-.gov-idea__part { margin: 0 0 12px; }
-.gov-idea__label { margin: 0 0 3px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
-.gov-idea__body {
-  margin: 0; color: var(--ink); font-size: 13.5px; line-height: 1.5;
-  white-space: pre-wrap; overflow-wrap: anywhere;
+/* The create-rank form sits under the rank list behind one full rule, with its
+   own heading in the label voice — a sub-form, not a second panel. */
+.gov-create { margin: var(--sp-md) 0 0; padding-top: var(--sp-sm); border-top: var(--line) solid var(--rule); }
+.gov-create__h {
+  flex: 1 1 100%;
+  margin: 0 0 2px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink);
 }
 
-/* Secondary: the tally rides the summary (visible without a click — ADR 0175
-   §9), the rules and the open ballot sit inside it. */
-.gov-item__meta { border-top: var(--line) solid var(--rule-soft); }
-.gov-item__summary {
-  padding: 8px 14px; cursor: pointer; color: var(--ink-soft); font-size: 12px;
-  list-style-position: inside;
+/* ---- the Board Room: one sitting, one panel -------------------------------------
+   The card order is task 1003270's (title, ballot, the idea, the apparatus); the
+   surface is the shell's .scroll (task 1003469). The subject of the vote is the
+   panel heading; the ballot sits directly under it; the idea is prose; the
+   constitutional apparatus stays one disclosure away with the tally on its summary. */
+.gov-item__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
+.gov-item__title {
+  margin: 0 0 8px;
+  min-width: 0;
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: 21px;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+  color: var(--ink);
+  text-shadow: var(--type-halo);
+  overflow-wrap: anywhere;
 }
+.gov-item__title a { color: inherit; text-decoration: none; }
+.gov-item__title a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
+.gov-item__title .fact-pill { vertical-align: middle; margin-left: 10px; text-shadow: none; }
+.gov-item__state { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+.gov-item__amend { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); max-width: var(--measure); overflow-wrap: anywhere; }
+.gov-item__act { margin: 8px 0 4px; }
+.gov-item__cast { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
+.gov-item__meta { margin: var(--sp-sm) 0 0; border-top: var(--line) solid var(--rule-soft); }
+.gov-item__summary { padding: 12px 0 0; min-height: 24px; cursor: pointer; font-size: 12.5px; color: var(--ink-soft); list-style-position: inside; }
 .gov-item__summary:hover { color: var(--ink); }
-.gov-item__metabody { padding: 10px 14px 2px; background: var(--glass); }
-.gov-item__metabody .gov-section { margin: 0 0 12px; background: var(--bg-card); }
-.gov-item__metabody .gov-empty { padding: 0 0 12px; }
+.gov-item__metabody { padding: 12px 0 0; }
+.gov-item__metabody .gov-grid-note { margin: 0 0 8px; }
+.gov-item__metabody .gov-grid-note:last-child { margin-bottom: 0; }
+.gov-item__metabody .ov-rows { margin-top: 12px; }
+/* The head over the closed sittings sits on the ground between panels, so it
+   carries the air a panel would. */
+.gov-board__divider { margin: var(--sp-md) 0 var(--sp-sm); }
 
-/* ---- the ballot controls ------------------------------------------------- */
-.gov-vote { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
-.gov-vote > .gov-grid-note { margin: 0; max-width: 62ch; }
-.gov-vote__no { align-self: stretch; }
+/* ---- the ballot controls ------------------------------------------------------ */
+/* The two ballot controls sit on one row; the objection disclosure takes the
+   whole row only once it is open, so its form drops under both buttons. */
+.gov-vote { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
+.gov-vote > .gov-grid-note { flex: 1 1 100%; margin: 0; }
+.gov-vote__no { flex: 0 1 auto; }
+.gov-vote__no[open] { flex: 1 1 100%; }
 /* The disclosure IS the secondary button, so its marker must go — otherwise the
    triangle sits inside the pill. */
-.gov-vote__no > summary { display: inline-block; cursor: pointer; }
+.gov-vote__no > summary { display: inline-flex; cursor: pointer; }
 .gov-vote__no > summary::marker { content: ''; }
 .gov-vote__no > summary::-webkit-details-marker { display: none; }
-.gov-vote__no > *:not(summary) { margin-top: 8px; }
-.gov-vote__no > textarea.gov-input { display: block; width: 100%; max-width: 62ch; }
-.gov-vote__sections { display: flex; flex-wrap: wrap; gap: 0 18px; }
-.gov-vote__sections .gov-perm {
-  padding: 2px 0; border-bottom: 0; cursor: pointer; font-size: 12.5px; color: var(--ink);
-}
+.gov-vote__no > *:not(summary) { margin-top: 10px; }
+.gov-vote__no textarea { display: block; width: 100%; max-width: var(--measure); box-sizing: border-box; }
+.gov-vote__sections { display: flex; flex-wrap: wrap; gap: 6px 16px; }
+.gov-vote__section { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: 13px; color: var(--ink); cursor: pointer; }
+.gov-vote__section input { width: 16px; height: 16px; margin: 0; }
 
-/* The ballot rows reuse `.gov-assign-row`, whose four flex children (name, pill,
-   timestamp, objection) cannot fit one 390w line — the objection is a paragraph,
-   not a cell, so it takes its own row and the rest wraps. Scoped to the metabody
-   so the Permissions and Constitution tabs keep their single-line rows. */
-.gov-item__metabody .gov-assign-row { flex-wrap: wrap; }
-.gov-item__metabody .gov-assign-row .gov-perm__guards { flex: 1 1 100%; margin-top: 4px; }
+/* ---- the charter library ------------------------------------------------------- */
+/* The configuration line under a charter: what an owner would type, in the
+   machine's face and the faint ink, under the prose that explains it. */
+.gov-charter__how { margin: 6px 0 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--ink-faint); max-width: 72ch; overflow-wrap: anywhere; }

package/modules/hall-ui/public/government.html

@@ -9,6 +9,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/government.css">
 </head>
 <body data-page="government" data-page-title="Government">
@@ -19,18 +20,22 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <!-- task 1003307: the board page head. Government shipped with NO <h1> at all
-           (one-header-main-h1 measured 0 on every render), so the re-skin
-           carries the structural fix rather than porting the hole. The heading
-           is the LABEL voice, not a display line: on a working surface the
-           page's own name is the least interesting thing on it. -->
+      <!-- The board page head (task 1003307): the LABEL voice, not a display
+           line, because on a working surface the page's own name is the least
+           interesting thing on it. -->
       <div class="page-head page-head--board">
         <h1 class="page-head__h">Government</h1>
         <p class="page-head__sub" id="gov-sub">Loading…</p>
       </div>
 
       <main id="hall-main">
-        <p class="gov-sealed" id="gov-sealed" hidden>Archons only.</p>
+        <!-- task 1003469: the sealed state is a panel with a heading, not a bare
+             line on the ground. government.js writes the real floor into the
+             lede from the pack's rank label, so the copy cannot drift. -->
+        <section class="scroll" id="gov-sealed" aria-labelledby="gov-sealed-h" hidden>
+          <h2 class="scroll__h" id="gov-sealed-h">Restricted</h2>
+          <p class="scroll__lede" id="gov-sealed-body">This page opens at a higher rank.</p>
+        </section>
 
         <section id="gov-body" hidden>
           <!-- The three-section IA (R15 of goal 1000069, ADR 0175): the page that
@@ -39,64 +44,87 @@
                #board-room, #ranks. -->
           <div id="gov-tabs"></div>
 
-          <!-- §1 Constitution — what this project runs. The live view (today's
-               values + the change history) and the charter library land with
-               R18/R19; until then the section frames the model honestly. -->
+          <!-- §1 Constitution — what this project runs. The live view is the
+               panel below; the change history and the charter library render as
+               their own panels after it (government.js loadConstitution). The
+               heading and its one-line lede keep the names
+               tests/government_board_room_copy.mjs pins. -->
           <section id="gov-panel-constitution" hidden>
-            <h2 class="gov-h">Constitution</h2>
-            <!-- Task 1003270: the ~60-word explainer that used to sit here said,
-                 at length, what the three live sentences below say from the real
-                 config. A reader met the paragraph before the values. -->
-            <p class="gov-grid-note">Three dials, all settings rather than code: <strong>who sits on the board</strong>, <strong>what counts as passing</strong>, and <strong>how long a vote stays open</strong>.</p>
+            <section class="scroll" aria-labelledby="gov-constitution-h">
+              <div id="gov-constitution-h"><h2 class="gov-h">Constitution</h2></div>
+              <p class="gov-grid-note">Three dials, all settings rather than code: <strong>who sits on the board</strong>, <strong>what counts as passing</strong>, and <strong>how long a vote stays open</strong>.</p>
+              <div id="gov-constitution-live"><span class="kit-skel"></span></div>
+            </section>
             <div id="gov-constitution"></div>
           </section>
 
-          <!-- §2 Board Room — open items, the clock, your vote (R16/R17). -->
-          <section id="gov-panel-board" hidden>
+          <!-- §2 Board Room — open items, the clock, your vote (R16/R17). In v3 a
+               sitting IS the panel, so the room itself is bare ground: the heading
+               and its lede sit over the sittings, each of which is a .scroll. -->
+          <section class="scroll scroll--bare" id="gov-panel-board" hidden>
             <h2 class="gov-h">Board Room</h2>
-            <!-- Task 1003270: one line, then the ballot. Everything the old
-                 ~50-word paragraph explained is now said by the cards themselves
-                 — each one carries who votes and how it passes, in plain words,
-                 under its own summary. -->
             <p class="gov-grid-note">Read an idea, then decide. An objection needs a reason and the section it faults.</p>
-            <div id="gov-board"></div>
+            <div id="gov-board"><span class="kit-skel"></span></div>
           </section>
 
-          <!-- §3 Ranks & Permissions — the administration surface, unchanged. -->
+          <!-- §3 Permissions — the administration surface: the rank list and the
+               permission grid side by side as two panels, then assignments and
+               the machine principals as panels of their own. Every id here is
+               load-bearing for government.js. -->
           <section id="gov-panel-ranks" hidden>
-          <div class="gov-layout">
-            <div class="gov-ranks-col">
-              <h2 class="gov-h">Ranks</h2>
-              <div class="gov-rank-list" id="gov-rank-list"></div>
-              <form class="gov-create" id="gov-create-form" autocomplete="off">
-                <h3 class="gov-h gov-h--minor">New custom rank</h3>
-                <input class="gov-input" id="gov-create-key" placeholder="rank-key (kebab-case)" maxlength="64" required>
-                <input class="gov-input" id="gov-create-label" placeholder="Label" maxlength="200" required>
-                <input class="gov-input" id="gov-create-desc" placeholder="Description (optional)" maxlength="2000">
-                <button class="gov-btn" type="submit">Create rank</button>
-              </form>
-            </div>
+            <div class="gov-layout">
+              <section class="scroll" aria-labelledby="gov-ranks-h">
+                <h2 class="scroll__h" id="gov-ranks-h">Ranks</h2>
+                <p class="scroll__lede">Pick a rank to see what it may do. The four ladder ranks ship with the platform; a custom rank is yours to shape.</p>
+                <div class="ov-rows ov-rows--select" id="gov-rank-list" role="group" aria-label="Ranks"></div>
+                <form class="ov-form gov-create" id="gov-create-form" autocomplete="off">
+                  <h3 class="gov-create__h">New custom rank</h3>
+                  <div class="ov-field">
+                    <label class="ov-field__l" for="gov-create-key">Key</label>
+                    <input id="gov-create-key" type="text" placeholder="rank-key (kebab-case)" maxlength="64" required>
+                  </div>
+                  <div class="ov-field">
+                    <label class="ov-field__l" for="gov-create-label">Label</label>
+                    <input id="gov-create-label" type="text" placeholder="What builders will see" maxlength="200" required>
+                  </div>
+                  <div class="ov-field ov-field--wide">
+                    <label class="ov-field__l" for="gov-create-desc">Description</label>
+                    <input id="gov-create-desc" type="text" placeholder="What this rank is for (optional)" maxlength="2000">
+                  </div>
+                  <button class="btn-accent" type="submit">Create rank</button>
+                </form>
+              </section>
 
-            <div class="gov-grid-col">
-              <h2 class="gov-h" id="gov-grid-title">Permissions</h2>
-              <p class="gov-grid-note" id="gov-grid-note"></p>
-              <div class="gov-grid-actions" id="gov-reset"></div>
-              <div id="gov-grid"></div>
+              <section class="scroll" aria-labelledby="gov-grid-title">
+                <h2 class="scroll__h" id="gov-grid-title">Permissions</h2>
+                <p class="scroll__lede" id="gov-grid-note"></p>
+                <div class="gov-grid-actions" id="gov-reset"></div>
+                <div id="gov-grid"><span class="kit-skel"></span></div>
+              </section>
             </div>
-          </div>
 
-          <h2 class="gov-h">Assignments</h2>
-          <p class="gov-grid-note">Hand a custom rank to a builder. The four ladder ranks are assigned by rank itself and cannot be granted here.</p>
-          <form class="gov-assign" id="gov-assign-form" autocomplete="off">
-            <input class="gov-input gov-input--id" id="gov-assign-builder" type="number" min="1" placeholder="Builder id" required>
-            <select class="gov-input" id="gov-assign-rank" required></select>
-            <button class="gov-btn" type="submit">Assign</button>
-          </form>
-          <div id="gov-assignments"></div>
+            <section class="scroll" aria-labelledby="gov-assign-h">
+              <h2 class="scroll__h" id="gov-assign-h">Assignments</h2>
+              <p class="scroll__lede">Hand a custom rank to a builder. The four ladder ranks are assigned by rank itself and cannot be granted here.</p>
+              <form class="ov-form" id="gov-assign-form" autocomplete="off">
+                <div class="ov-field ov-field--sm">
+                  <label class="ov-field__l" for="gov-assign-builder">Builder id</label>
+                  <input id="gov-assign-builder" type="number" min="1" placeholder="e.g. 95" required>
+                </div>
+                <div class="ov-field">
+                  <label class="ov-field__l" for="gov-assign-rank">Custom rank</label>
+                  <select id="gov-assign-rank" required></select>
+                </div>
+                <button class="btn-accent" type="submit">Assign</button>
+              </form>
+              <div id="gov-assignments"><span class="kit-skel"></span></div>
+            </section>
 
-          <h2 class="gov-h">Machine principals</h2>
-          <p class="gov-grid-note">Capabilities held by a machine identity, never by a person or a rank. Shown for completeness — nothing here can be granted.</p>
-          <div id="gov-principals"></div>
+            <section class="scroll" aria-labelledby="gov-principals-h">
+              <h2 class="scroll__h" id="gov-principals-h">Machine principals</h2>
+              <p class="scroll__lede">Capabilities held by a machine identity, never by a person or a rank. Shown for completeness; nothing here can be granted.</p>
+              <div id="gov-principals"><span class="kit-skel"></span></div>
+            </section>
           </section>
         </section>
       </main>
@@ -113,6 +141,6 @@
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-16-gate"></script>
 <script src="/builders/hall-kit.js"></script>
-<script src="/builders/government.js?v=2026-08-18-board-announce"></script>
+<script src="/builders/government.js?v=2026-09-02-gov-rows"></script>
 </body>
 </html>