style: align global context panel and simplify selection copy

frontend/src/shell/WorkingContextShelf.css

@@ -1,28 +1,26 @@
-.thot-context-layout { display: flex; flex-direction: column; min-width: 0; height: var(--thoth-app-height, 100dvh); overflow: hidden; }
+.thot-context-layout { --thoth-content-gutter: 1.25rem; --thoth-content-padding: 1rem; display: flex; flex-direction: column; min-width: 0; height: var(--thoth-app-height, 100dvh); overflow: hidden; }
 .thot-context-layout > .thot-app-shell { flex: 1; height: auto; min-height: 0; }
 .thot-context-shelf { flex: none; min-width: 0; max-height: 60%; overflow: auto; border-bottom: 1px solid oklch(var(--border)); background: oklch(var(--muted)/.5); container: working-context / inline-size; }
-.thot-context-trigger { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 72px; padding: 14px 24px; text-align: left; }
+.thot-context-trigger { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 72px; padding: 14px calc(var(--thoth-content-gutter) + var(--thoth-content-padding)); text-align: left; }
 .thot-context-summary { min-width: 0; flex: 1; }
 .thot-context-summary small { display: block; font: 500 var(--text-meta)/1.5 var(--font-sans); color: oklch(var(--muted-foreground)); }
 .thot-context-summary strong { display: block; font: 600 .875rem/1.6 var(--font-sans); overflow-wrap: anywhere; }
 .thot-context-summary strong span { padding-inline: 12px; color: oklch(var(--muted-foreground)); }
 .thot-context-action { display: flex; align-items: center; gap: 8px; color: oklch(var(--primary)); font-size: .75rem; font-weight: 600; }
 .thot-context-trigger[aria-expanded=true] .thot-context-action > svg:last-child { transform: rotate(180deg); }
-.thot-context-body { padding: 0 24px 20px; }
+.thot-context-body { margin: 0 var(--thoth-content-gutter) var(--thoth-content-gutter); padding: var(--thoth-content-padding); background: oklch(var(--card)); }
 .thot-context-body[hidden] { display: none; }
-.thot-context-explanation { max-width: none; margin: 0 0 20px; font-size: var(--text-control); line-height: 1.6; color: oklch(var(--muted-foreground)); }
 .thot-context-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
 .thot-context-fields label { display: grid; min-width: 0; gap: 8px; font-size: var(--text-control); }
 .thot-context-fields label > span { display: flex; align-items: center; gap: 8px; font-weight: 600; }
 .thot-context-fields select { min-width: 0; width: 100%; padding: 9px 12px; border: 1px solid oklch(var(--border)); border-radius: 6px; background: oklch(var(--card)); }
-.thot-context-fields small, .thot-context-body > p[role] { color: oklch(var(--muted-foreground)); font-size: .75rem; line-height: 1.6; }
+.thot-context-body > p[role] { color: oklch(var(--muted-foreground)); font-size: .75rem; line-height: 1.6; }
 .thot-context-body > p[role] { margin-top: 12px; }
 .thot-context-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
 .thot-context-shelf :is(button,select):focus-visible { outline: 2px solid oklch(var(--ring)); outline-offset: 3px; }
 .thot-context-shelf select:disabled { opacity: .65; }
 @container working-context (max-width: 38rem) {
   .thot-context-fields { grid-template-columns: minmax(0,1fr); gap: 14px; }
-  .thot-context-trigger { padding: 12px 16px; gap: 10px; }
-  .thot-context-body { padding: 0 16px 16px; }
+  .thot-context-trigger { padding-block: 12px; gap: 10px; }
   .thot-context-action > span { display: none; }
 }

frontend/src/shell/WorkingContextShelf.tsx

@@ -18,17 +18,16 @@ export function WorkingContextShelf({ context, locked, onWorkspace, onModel }: {
       <span className="thot-context-action">{locked && <LockKeyhole size={15} aria-hidden />}<span>{locked ? "Locked" : open ? "Close" : "Change context"}</span><ChevronDown size={16} aria-hidden /></span>
     </button>
     <div id="thoth-working-context" hidden={!open} className="thot-context-body">
-      <p className="thot-context-explanation">Your last choices take precedence over installation defaults. Workspace and model are remembered independently.</p>
       <div className="thot-context-fields">
         <label><span><Layers size={15} aria-hidden />Workspace</span>
           <select aria-label="Workspace" value={context.workspace ? context.workspaceId : ""} disabled={locked || context.loading} onChange={event => onWorkspace(event.target.value)}>
             <option value="" disabled>Choose a workspace</option>{context.workspaces.map(workspace => <option key={workspace.id} value={workspace.id}>{workspace.displayName}</option>)}
-          </select><small>{context.origins.workspace}</small>
+          </select>
         </label>
         <label><span><Cpu size={15} aria-hidden />AI interaction model</span>
           <select aria-label="Model" value={context.model ? context.modelId : ""} disabled={locked || context.loading} onChange={event => onModel(event.target.value)}>
             <option value="" disabled>Choose a model</option>{context.models.map(model => <option key={`${model.provider}/${model.id}`} value={`${model.provider}/${model.id}`}>{model.name}</option>)}
-          </select><small>{context.origins.model}</small>
+          </select>
         </label>
       </div>
       {locked && <p role="status">Workspace and model are locked until the current operation finishes.</p>}

frontend/src/shell/database-management/FleetLedgerShell.css

@@ -14,8 +14,8 @@
 }
 
 .thot-fleet-ledger__workspace {
-  --fleet-block-gutter: 1.25rem;
-  --fleet-block-padding: 1rem;
+  --fleet-block-gutter: var(--thoth-content-gutter, 1.25rem);
+  --fleet-block-padding: var(--thoth-content-padding, 1rem);
   --fleet-summary-inset: calc(var(--fleet-block-gutter) + var(--fleet-block-padding));
   display: flex;
   flex: 1;