@unson/brainbase-mcp 0.6.0 → 0.8.0

package/ui/outcome-knowledge.css

@@ -1,25 +1,61 @@
+/*
+ * Organization edition look (moved from brainbase-organization apps/web/public/styles.css,
+ * where it was loaded before this file). Kept first so the cascade is the same as in the
+ * organization edition. Colors read the shared tokens, with the organization values as fallbacks.
+ */
+.knowledge-outcome { display: grid; gap: 20px; color: var(--bb-color-ink, #17221c); }
+.knowledge-outcome-head { padding: 24px; border: 1px solid var(--bb-color-border, #dce5df); border-radius: 16px; background: linear-gradient(135deg, var(--bb-color-header-start, #f7faf8), var(--bb-color-header-end, #eef5f0)); }
+.knowledge-outcome-head h2 { margin: 4px 0 8px; font-size: clamp(1.45rem, 3vw, 2rem); }
+.knowledge-eyebrow { color: var(--bb-color-eyebrow, #47715a); font-size: .72rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
+.knowledge-outcome-nav,
+.knowledge-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
+.knowledge-tab,
+.knowledge-button { min-height: 40px; border: 1px solid var(--bb-color-control-border, #cbd8d0); border-radius: 9px; background: var(--bb-color-panel, #fff); color: inherit; padding: 8px 12px; font: inherit; cursor: pointer; }
+.knowledge-tab.active,
+.knowledge-button-primary { border-color: var(--bb-color-action, #35684c); background: var(--bb-color-action, #35684c); color: var(--bb-color-action-text, #fff); }
+.knowledge-outcome-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 18px; }
+.knowledge-outcome-primary,
+.knowledge-outcome-detail { min-width: 0; padding: 18px; border: 1px solid var(--bb-color-border, #dce5df); border-radius: 14px; background: var(--bb-color-panel, #fff); }
+.knowledge-unknown-copy { color: var(--bb-color-muted, #66736b); }
+.knowledge-filter-region form,
+.knowledge-form { display: grid; gap: 12px; }
+.knowledge-outcome input,
+.knowledge-outcome select,
+.knowledge-outcome textarea { box-sizing: border-box; width: 100%; border: 1px solid var(--bb-color-border-strong, #bdcbc2); border-radius: 8px; background: var(--bb-color-panel, #fff); padding: 9px 10px; font: inherit; }
+.knowledge-outcome button:focus-visible,
+.knowledge-outcome input:focus-visible { outline: 3px solid #9fc9ad; outline-offset: 2px; }
+.knowledge-state,
+.knowledge-warning-copy { padding: 11px 12px; border-radius: 9px; background: #fff7e8; color: #694d18; }
+.knowledge-list { display: grid; gap: 8px; }
+@media (max-width: 1340px) {
+  .knowledge-outcome-body { grid-template-columns: 1fr; }
+  .knowledge-outcome-head,
+  .knowledge-outcome-primary,
+  .knowledge-outcome-detail { padding: 14px; }
+}
+
 /* Knowledge outcome workspace. The component owns its layout so the shared
    shell cannot turn an operational master/detail surface into stacked cards. */
 .knowledge-outcome {
-  --knowledge-paper: var(--paper, #fbfbf8);
-  --knowledge-canvas: var(--canvas, #f2f3ef);
-  --knowledge-ink: var(--ink, #111412);
-  --knowledge-muted: var(--muted, #656b67);
-  --knowledge-quiet: var(--quiet, #929894);
-  --knowledge-line: var(--line, #d9ddd8);
-  --knowledge-line-strong: var(--line-dark, #bfc5c0);
-  --knowledge-green: var(--green, #087d62);
-  --knowledge-green-soft: var(--green-soft, #e5f1ec);
-  --knowledge-amber: var(--amber, #c9870c);
-  --knowledge-amber-soft: var(--amber-soft, #fff0c7);
-  --knowledge-red: var(--red, #d92335);
-  --knowledge-red-soft: var(--red-soft, #fde9eb);
+  --knowledge-paper: var(--bb-color-panel, var(--paper, #fbfbf8));
+  --knowledge-canvas: var(--bb-color-surface, var(--canvas, #f2f3ef));
+  --knowledge-ink: var(--bb-color-ink, var(--ink, #111412));
+  --knowledge-muted: var(--bb-color-muted, var(--muted, #656b67));
+  --knowledge-quiet: var(--bb-color-muted, var(--quiet, #929894));
+  --knowledge-line: var(--bb-color-border, var(--line, #d9ddd8));
+  --knowledge-line-strong: var(--bb-color-border-strong, var(--line-dark, #bfc5c0));
+  --knowledge-green: var(--bb-color-accent, var(--green, #087d62));
+  --knowledge-green-soft: var(--bb-color-accent-soft, var(--green-soft, #e5f1ec));
+  --knowledge-amber: var(--bb-color-warning, var(--amber, #c9870c));
+  --knowledge-amber-soft: var(--bb-color-warning-soft, var(--amber-soft, #fff0c7));
+  --knowledge-red: var(--bb-color-danger, var(--red, #d92335));
+  --knowledge-red-soft: var(--bb-color-danger-soft, var(--red-soft, #fde9eb));
   display: grid;
   gap: 0;
   min-width: 0;
   color: var(--knowledge-ink);
   background: transparent;
-  font-family: Geist, "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: var(--bb-font-sans, Geist, "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
   line-height: 1.5;
 }
 

package/ui/outcome-knowledge.js

@@ -1043,10 +1043,24 @@ function defaultCandidateBody(values, context = {}) {
   };
 }
 
+/**
+ * Creates the knowledge outcome workspace.
+ *
+ * @param {object} options
+ * @param {(session: object|null, projectCode: string|null) => boolean} [options.canEditDestination]
+ *   Decides whether the current user may register this project's knowledge
+ *   document destination. It receives the resolved session value and the
+ *   project code; only a `true` result shows the registration form. Without
+ *   it, the form follows `canManageKnowledge(session)`. Revision,
+ *   supersession, and retirement always follow `canManageKnowledge`.
+ */
 export function createKnowledgeOutcomeController(options = {}) {
   const { root, api, apiMutation, project, session, onStateChange, onCommitted, onRetired, resolveDecisionDomain, serializeDraftInput, serializeCandidate, serializeRevision, serializeRetire, serializePreview } = options;
   if (!root || typeof root.replaceChildren !== 'function') throw new Error('knowledge_root_unavailable');
   const code = projectCodeOf(project);
+  const canEditDestination = () => (typeof options.canEditDestination === 'function'
+    ? options.canEditDestination((typeof session === 'function' ? session() : session) ?? null, code ?? null) === true
+    : canManageKnowledge(session));
   const projectValue = typeof project === 'function' ? project() : project;
   const ownerCandidates = [];
   for (const candidate of [projectValue?.owner, ...(projectValue?.members?.items ?? [])]) {
@@ -1154,7 +1168,7 @@ export function createKnowledgeOutcomeController(options = {}) {
     destination.append(destinationHeading);
     const destinationContent = makeElement('div', { className: 'knowledge-destination-content' });
     renderKnowledgeDestination(destinationContent, state.destination, {
-      canEdit: canManageKnowledge(session),
+      canEdit: canEditDestination(),
       onReload: loadDestination,
       onSave: saveDestination,
     });

package/ui/outcome-mana.css

@@ -1,15 +1,55 @@
+/*
+ * Organization edition look (moved from brainbase-organization apps/web/public/styles.css,
+ * where it was loaded before this file). Kept first so the cascade is the same as in the
+ * organization edition. Colors read the shared tokens, with the organization values as fallbacks.
+ */
+.outcome-mana-root { display: grid; gap: 20px; color: var(--bb-color-ink, #17221c); }
+.outcome-mana-header { padding: 24px; border: 1px solid var(--bb-color-border, #dce5df); border-radius: 16px; background: linear-gradient(135deg, var(--bb-color-header-start, #f7faf8), var(--bb-color-header-end, #eef5f0)); }
+.outcome-mana-header h1 { margin: 4px 0 8px; font-size: clamp(1.45rem, 3vw, 2rem); }
+.outcome-mana-eyebrow { color: var(--bb-color-eyebrow, #47715a); font-size: .72rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
+.outcome-mana-actions,
+.outcome-mana-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
+.outcome-mana-button,
+.outcome-mana-list-select { min-height: 40px; border: 1px solid var(--bb-color-control-border, #cbd8d0); border-radius: 9px; background: var(--bb-color-panel, #fff); color: inherit; padding: 8px 12px; font: inherit; cursor: pointer; }
+.outcome-mana-button-primary { border-color: var(--bb-color-action, #35684c); background: var(--bb-color-action, #35684c); color: var(--bb-color-action-text, #fff); }
+.outcome-mana-section { min-width: 0; padding: 18px; border: 1px solid var(--bb-color-border, #dce5df); border-radius: 14px; background: var(--bb-color-panel, #fff); }
+.outcome-mana-section { display: grid; gap: 14px; }
+.outcome-mana-section-heading { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
+.outcome-mana-section-heading h2 { margin: 0; font-size: 1.1rem; }
+.outcome-mana-section-description,
+.outcome-mana-muted { color: var(--bb-color-muted, #66736b); }
+.outcome-mana-section form { display: grid; gap: 12px; }
+.outcome-mana-trigger-options { display: flex; flex-wrap: wrap; gap: 10px 18px; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--bb-color-border, #dce5df); border-radius: 9px; }
+.outcome-mana-trigger-options legend { padding-inline: 5px; }
+.outcome-mana-choice { display: inline-flex; align-items: center; gap: 7px; min-width: max-content; }
+.outcome-mana-root .outcome-mana-choice input { width: auto; margin: 0; }
+.outcome-mana-root input,
+.outcome-mana-root select,
+.outcome-mana-root textarea { box-sizing: border-box; width: 100%; border: 1px solid var(--bb-color-border-strong, #bdcbc2); border-radius: 8px; background: var(--bb-color-panel, #fff); padding: 9px 10px; font: inherit; }
+.outcome-mana-root button:focus-visible,
+.outcome-mana-root input:focus-visible { outline: 3px solid #9fc9ad; outline-offset: 2px; }
+.outcome-mana-state,
+.outcome-mana-inline-error { padding: 11px 12px; border-radius: 9px; background: #fff7e8; color: #694d18; }
+.outcome-mana-inline-success { padding: 11px 12px; border-radius: 9px; background: #edf8f1; color: #28573b; }
+.outcome-mana-run-list { display: grid; gap: 8px; }
+.outcome-mana-run-item { display: flex; gap: 8px; align-items: center; }
+@media (max-width: 1340px) {
+  .outcome-mana-header,
+  .outcome-mana-section { padding: 14px; }
+}
+
 .outcome-mana-root {
-  --mana-bg: #f6f8f6;
-  --mana-surface: #ffffff;
-  --mana-surface-soft: #f0f5f1;
-  --mana-ink: #172019;
-  --mana-muted: #657269;
-  --mana-border: #d5ded6;
-  --mana-border-strong: #b9c8bb;
-  --mana-accent: #087d62;
-  --mana-accent-dark: #05624e;
-  --mana-danger: #a13d3d;
-  --mana-warning: #8a631d;
+  --mana-bg: var(--bb-color-surface, #f6f8f6);
+  --mana-surface: var(--bb-color-panel, #ffffff);
+  --mana-surface-soft: var(--bb-color-surface, #f0f5f1);
+  --mana-ink: var(--bb-color-ink, #172019);
+  --mana-muted: var(--bb-color-muted, #657269);
+  --mana-border: var(--bb-color-border, #d5ded6);
+  --mana-border-strong: var(--bb-color-border-strong, #b9c8bb);
+  --mana-accent: var(--bb-color-accent, #087d62);
+  --mana-accent-dark: var(--bb-color-accent-strong, #05624e);
+  --mana-danger: var(--bb-color-danger, #a13d3d);
+  --mana-warning: var(--bb-color-warning, #8a631d);
   --mana-shadow: 0 1px 2px rgba(23, 32, 25, 0.04), 0 10px 28px rgba(23, 32, 25, 0.055);
   box-sizing: border-box;
   max-width: 1180px;
@@ -17,7 +57,7 @@
   padding: 28px 24px 72px;
   color: var(--mana-ink);
   background: var(--mana-bg);
-  font-family: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: var(--bb-font-sans, Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
   line-height: 1.5;
 }
 .outcome-mana-root *, .outcome-mana-root *::before, .outcome-mana-root *::after { box-sizing: border-box; }
@@ -55,7 +95,7 @@
 .outcome-mana-settings-workspace > .outcome-mana-view-heading { padding: 16px 18px; border: 1px solid var(--mana-border); border-radius: 12px; background: var(--mana-surface); }
 .outcome-mana-runs-view .outcome-mana-section-heading { border-radius: 12px 12px 0 0; }
 .outcome-mana-setting-card h3 { margin: 0 0 12px; font-size: .9rem; }
-.outcome-mana-setting-card p { margin: 0; color: var(--mana-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; white-space: pre-wrap; overflow-wrap: anywhere; }
+.outcome-mana-setting-card p { margin: 0; color: var(--mana-muted); font-family: var(--bb-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .76rem; white-space: pre-wrap; overflow-wrap: anywhere; }
 
 /* The five operational surfaces share a dense, rail-based workspace.  The
    data remains readable at the 1586px reference viewport while each rail
@@ -74,7 +114,7 @@ button.outcome-mana-connection-row:focus-visible { position: relative; z-index:
 .outcome-mana-connection-header { color: var(--mana-muted); background: var(--mana-surface-soft); font-size: .7rem; font-weight: 720; letter-spacing: .02em; }
 .outcome-mana-connector-identity { display: flex; min-width: 0; align-items: center; gap: 10px; }
 .outcome-mana-connector-icon-frame { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid rgba(31,42,35,.08); border-radius: 8px; background: #f1f4f1; }
-.outcome-mana-connector-icon { display: block; width: 20px; height: 20px; opacity: .9; }
+.outcome-mana-connector-icon { display: block; width: 20px; height: 20px; object-fit: contain; opacity: .9; }
 .outcome-mana-connector-copy { display: grid; min-width: 0; gap: 2px; }
 .outcome-mana-connector-copy strong { overflow: hidden; font-size: .79rem; font-weight: 740; text-overflow: ellipsis; white-space: nowrap; }
 .outcome-mana-connector-copy h3 { margin: 0; font-size: 1.05rem; }
@@ -91,6 +131,9 @@ button.outcome-mana-connection-row:focus-visible { position: relative; z-index:
 .outcome-mana-connection-inspector, .outcome-mana-resource-panel { position: sticky; top: 18px; margin: 0; }
 .outcome-mana-connection-inspector { min-height: 210px; padding: 18px; border: 1px solid var(--mana-border); border-radius: 12px; background: var(--mana-surface); box-shadow: var(--mana-shadow); }
 .outcome-mana-connection-inspector h3 { font-size: 1.05rem; }
+.outcome-mana-resource-section { margin-top: 24px; }
+.outcome-mana-project-resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
+.outcome-mana-project-resource-card { min-width: 0; padding: 14px; border: 1px solid var(--mana-border); border-radius: 11px; background: var(--mana-surface); }
 .outcome-mana-resource-panel { min-height: 210px; }
 .outcome-mana-detail-tabs { display: flex; gap: 5px; margin: 16px 0 14px; padding: 4px; overflow-x: auto; border-bottom: 1px solid var(--mana-border); }
 .outcome-mana-detail-tab { min-height: 34px; padding: 7px 12px; border: 0; border-bottom: 2px solid transparent; color: var(--mana-muted); background: transparent; font: inherit; font-size: .78rem; font-weight: 720; white-space: nowrap; cursor: pointer; }
@@ -198,6 +241,35 @@ textarea.outcome-mana-input { min-height: 92px; resize: vertical; }
 .outcome-mana-authority-row { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr 1fr 1.1fr; min-width: 720px; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--mana-border); font-size: 0.8rem; }
 .outcome-mana-authority-row:first-child { border-top: 0; }
 .outcome-mana-authority-header { color: var(--mana-muted); background: var(--mana-surface-soft); font-size: 0.73rem; font-weight: 700; }
+.outcome-mana-resource-picker { display: grid; grid-column: 1 / -1; gap: 9px; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--mana-border); border-radius: 9px; }
+.outcome-mana-resource-picker legend { padding: 0 5px; color: var(--mana-ink); font-size: .79rem; font-weight: 700; }
+.outcome-mana-resource-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.outcome-mana-resource-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 10px; border: 1px solid var(--mana-border); border-radius: 8px; background: #fff; cursor: pointer; }
+.outcome-mana-resource-choice:has(input:checked) { border-color: var(--mana-accent); background: #edf8f1; }
+.outcome-mana-resource-choice input { grid-row: 1 / 3; accent-color: var(--mana-accent); }
+.outcome-mana-resource-choice span { overflow: hidden; font-size: .8rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
+.outcome-mana-resource-choice small { overflow-wrap: anywhere; color: var(--mana-muted); font-size: .68rem; }
+.outcome-mana-resource-choice .outcome-mana-resource-version { grid-column: 2; grid-row: auto; width: 100%; min-width: 0; margin-top: 5px; padding: 7px 9px; border: 1px solid var(--mana-border); border-radius: 7px; background: #fff; color: var(--mana-ink); font: .72rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
+.outcome-mana-resource-preserved { margin: 0; padding: 8px 10px; border-radius: 7px; color: var(--mana-warning); background: #fff9e9; font-size: .74rem; }
+.outcome-mana-resource-picker-value[hidden] { display: none; }
+.outcome-mana-profile-picker { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--mana-border); border-radius: 10px; background: #fbfdfb; }
+.outcome-mana-profile-picker legend { padding: 0 5px; color: var(--mana-ink); font-size: .85rem; font-weight: 760; }
+.outcome-mana-profile-picker > .outcome-mana-muted { margin: 0; font-size: .76rem; }
+.outcome-mana-profile-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--mana-border); border-radius: 9px; background: #fff; cursor: pointer; }
+.outcome-mana-profile-card.is-selected { border-color: var(--mana-accent); background: #edf8f1; box-shadow: 0 0 0 1px rgba(8,125,98,.12); }
+.outcome-mana-profile-card > input { margin-top: 3px; accent-color: var(--mana-accent); }
+.outcome-mana-profile-copy, .outcome-mana-profile-statuses { display: grid; gap: 5px; min-width: 0; }
+.outcome-mana-profile-copy strong { font-size: .83rem; }
+.outcome-mana-profile-copy small, .outcome-mana-profile-statuses small { color: var(--mana-muted); font-size: .72rem; line-height: 1.45; }
+.outcome-mana-profile-statuses { justify-items: end; white-space: nowrap; }
+.outcome-mana-profile-statuses [data-readiness="available"] { color: var(--mana-accent-dark); font-weight: 750; }
+.outcome-mana-profile-statuses [data-readiness="unavailable"] { color: var(--mana-danger); font-weight: 750; }
+.outcome-mana-profile-statuses [data-readiness="unknown"] { color: var(--mana-warning); }
+.outcome-mana-resource-choice[hidden] { display: none; }
+.outcome-mana-preflight-list { display: grid; gap: 9px; margin: 0 0 16px; }
+.outcome-mana-preflight-item { padding: 12px; border: 1px solid var(--mana-border); border-radius: 9px; background: #fbfdfb; }
+.outcome-mana-preflight-item > strong { display: inline-block; margin: 0 8px 8px 0; font-size: .82rem; }
+.outcome-mana-preflight-item .outcome-mana-definition { margin-bottom: 0; }
 .outcome-mana-trigger-options { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; border: 0; }
 .outcome-mana-trigger-options legend { width: 100%; margin-bottom: 1px; font-size: 0.8rem; font-weight: 700; }
 .outcome-mana-choice { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--mana-border); border-radius: 8px; font-size: 0.82rem; cursor: pointer; }
@@ -219,8 +291,11 @@ textarea.outcome-mana-input { min-height: 92px; resize: vertical; }
 }
 @media (max-width: 920px) {
   .outcome-mana-overview-layout, .outcome-mana-connection-detail-layout, .outcome-mana-delegation-layout, .outcome-mana-settings-layout { grid-template-columns: minmax(0, 1fr); }
+  .outcome-mana-project-resource-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
   .outcome-mana-inspector, .outcome-mana-connection-inspector, .outcome-mana-resource-panel, .outcome-mana-settings-rail { position: static; }
   .outcome-mana-empty-steps { grid-template-columns: 1fr; }
+  .outcome-mana-profile-card { grid-template-columns: auto minmax(0,1fr); }
+  .outcome-mana-profile-statuses { grid-column: 2; justify-items: start; white-space: normal; }
 }
 @media (max-width: 1100px) {
   .outcome-mana-view-heading { display: grid; }
@@ -232,6 +307,7 @@ textarea.outcome-mana-input { min-height: 92px; resize: vertical; }
   .outcome-mana-section-heading, .outcome-mana-section-content { padding: 16px; }
   .outcome-mana-section-heading { display: grid; gap: 10px; }
   .outcome-mana-form { display: grid; grid-template-columns: 1fr; }
+  .outcome-mana-resource-choices { grid-template-columns: 1fr; }
   .outcome-mana-form > .outcome-mana-field, .outcome-mana-form > .outcome-mana-inline-fields, .outcome-mana-form > .outcome-mana-actions, .outcome-mana-form > .outcome-mana-inline-error { grid-column: auto; }
   .outcome-mana-inline-fields { grid-template-columns: 1fr; }
   .outcome-mana-actions .outcome-mana-button, .outcome-mana-toolbar .outcome-mana-button { flex: 1 1 150px; }
@@ -241,6 +317,7 @@ textarea.outcome-mana-input { min-height: 92px; resize: vertical; }
   .outcome-mana-view-heading { display: grid; }
   .outcome-mana-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .outcome-mana-overview-layout, .outcome-mana-connection-grid, .outcome-mana-settings-grid { grid-template-columns: 1fr; }
+  .outcome-mana-project-resource-grid { grid-template-columns: 1fr; }
   .outcome-mana-inspector, .outcome-mana-connection-inspector, .outcome-mana-resource-panel, .outcome-mana-settings-rail { position: static; }
   .outcome-mana-connection-detail-layout, .outcome-mana-delegation-layout, .outcome-mana-settings-layout { grid-template-columns: 1fr; }
   .outcome-mana-settings-fieldset { grid-template-columns: 1fr; }