.approvals-list { display:grid; gap:12px; }
.capability-suggestions { display:grid; gap:10px; margin:0 0 16px; }
.capability-suggestion { display:grid; gap:10px; padding:15px;
                         border:1px solid var(--ui-warning-line);
                         border-left:3px solid var(--ui-warning); border-radius:9px;
                         background:var(--ui-warning-soft); }
.capability-suggestion h3 { margin:0; color:var(--ui-text); font-size:14px; }
.capability-suggestion p { margin:0; color:var(--ui-text-soft); line-height:1.5; }
.capability-evidence { color:var(--ui-muted); font-size:12px; }
.capability-grant-scope { padding:9px 11px; border:1px solid var(--ui-accent-line);
                          border-radius:7px; background:var(--ui-accent-soft);
                          color:var(--ui-text) !important; font-weight:650; }
.capability-attempts { border-top:1px solid var(--ui-warning-line); padding-top:9px; }
.capability-attempts summary { color:var(--ui-text-soft); cursor:pointer; font-size:12px;
                               font-weight:650; }
.capability-attempt-list { display:grid; gap:7px; margin-top:8px; }
.capability-attempt { display:grid; gap:3px; padding:8px 9px; border:1px solid var(--ui-line);
                      border-radius:7px; background:var(--ui-panel); }
.capability-attempt small { color:var(--ui-muted); }
.capability-attempt code { overflow:auto; color:var(--ui-text-soft); white-space:pre-wrap;
                           overflow-wrap:anywhere; font-size:12px; }
.capability-feedback { min-height:18px; color:var(--ui-muted); font-size:12px; }
.capability-feedback.error { color:var(--ui-danger); }
.capability-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.granted-capabilities { display:grid; gap:10px; }
.granted-capability { display:grid; grid-template-columns:minmax(0,1fr) auto;
                      gap:10px; align-items:center; padding:13px;
                      border:1px solid var(--ui-line); border-radius:8px;
                      background:var(--ui-panel); }
.capability-revoke-confirm { display:grid; justify-items:end; gap:6px; }
.capability-revoke-confirm small { max-width:220px; color:var(--ui-muted);
                                   text-align:right; }
.capability-revoke-confirm .button + .button { margin-left:6px; }
.approval-card { display:grid; gap:12px; padding:16px; border:1px solid var(--ui-line);
                 border-left:3px solid var(--ui-warning); border-radius:9px;
                 background:var(--ui-panel); box-shadow:0 10px 26px var(--ui-shadow-color); }
.approval-card.permission { border-left-color:var(--ui-accent); }
.approval-session-group { display:grid; gap:10px; }
.approval-group-header { display:flex; gap:10px; align-items:center;
                         justify-content:space-between; flex-wrap:wrap;
                         padding:10px 12px; border:1px solid var(--ui-line);
                         border-radius:8px; background:var(--ui-muted-surface); }
.approval-group-header strong { font-size:12px; color:var(--ui-text-soft); }
.approval-technical { border:1px solid var(--ui-line); border-radius:7px;
                      background:var(--ui-inset); }
.approval-technical summary { cursor:pointer; padding:10px 12px; color:var(--ui-muted);
                              font-size:12px; }
.approval-technical .approval-preview { border:0; border-top:1px solid var(--ui-line);
                                        border-radius:0 0 7px 7px; }
.approval-intent { color:var(--ui-text); font-size:14px; line-height:1.45; margin:0; }
.approval-command { font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace !important; }
.approval-consequence { display:flex; gap:8px; align-items:center; flex-wrap:wrap;
                        color:var(--ui-muted); font-size:12px; }
.panel.approval-group-dialog { width:min(520px,100%); height:auto; max-height:88vh; }
.approval-group-dialog .modal-body { display:grid; gap:14px; }
.approval-group-dialog label { display:grid; gap:6px; color:var(--ui-text-soft);
                               font-size:12px; font-weight:650; }
.approval-group-dialog textarea { min-height:96px; resize:vertical; }
.approval-group-dialog-actions { display:flex; justify-content:flex-end;
                                 gap:8px; flex-wrap:wrap; }
.approval-group-error { margin:0; color:var(--ui-danger); font-size:12px; }
.sdk-input-request { padding:12px 14px; border:1px solid var(--ui-warning-line);
                     border-left:3px solid var(--ui-warning); border-radius:8px;
                     background:var(--ui-warning-soft); color:var(--ui-text); }
.sdk-input-request strong { display:block; margin-bottom:5px; color:var(--ui-warning); }
.held-approval-banner {
  align-self:stretch;
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid var(--ui-warning-line);
  border-left:4px solid var(--ui-warning);
  border-radius:10px;
  background:var(--ui-warning-soft);
  color:var(--ui-text);
  box-shadow:var(--ui-shadow-sm);
}
.held-approval-copy { display:grid; gap:4px; min-width:0; }
.held-approval-copy strong { overflow-wrap:anywhere; }
.held-approval-state { color:var(--ui-warning); font-size:12px; font-weight:700; }
.held-approval-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.held-approval-feedback { color:var(--ui-danger); font-size:12px; }
.held-approval-details summary {
  cursor:pointer;
  color:var(--ui-text-soft);
  font-size:12px;
}
.held-approval-details pre {
  max-height:180px;
  overflow:auto;
  margin:8px 0 0;
  padding:9px;
  border:1px solid var(--ui-line);
  border-radius:6px;
  background:var(--ui-input);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.held-approval-banner.is-approved {
  border-color:var(--ui-success-line);
  border-left-color:var(--ui-success);
  background:var(--ui-success-soft);
}
.held-approval-banner.is-approved .held-approval-state { color:var(--ui-success); }
.held-approval-banner.is-rejected,
.held-approval-banner.is-expired { opacity:.78; }
.approval-card.is-deep-linked {
  outline:3px solid var(--ui-accent);
  outline-offset:3px;
}
.approval-card-header { display:flex; align-items:flex-start; justify-content:space-between;
                        gap:16px; }
.approval-card-title { min-width:0; display:grid; gap:4px; }
.approval-card-title strong { color:var(--ui-text); font-size:14px; }
.approval-card-meta { color:var(--ui-muted); font-size:12px; }
.approval-kind { flex:0 0 auto; background:var(--ui-warning-soft); color:var(--ui-warning); }
.approval-preview { max-height:340px; overflow:auto; margin:0; padding:13px 15px;
                    border:1px solid var(--ui-line); border-radius:7px;
                    background:var(--ui-inset); color:var(--ui-text-prose); white-space:pre-wrap;
                    overflow-wrap:anywhere; font:13.5px/1.6 -apple-system,'Segoe UI',Roboto,sans-serif; }
.approval-safety { color:var(--ui-muted); font-size:12px; }
.approval-safety strong { color:var(--ui-success); }
.approval-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px;
                    flex-wrap:wrap; }
.approval-reject { color:var(--ui-danger); }
.approvals-result { min-height:18px; color:var(--ui-danger); font-size:12px; }
.approval-history-filters { display:flex; gap:10px; align-items:end; flex-wrap:wrap;
                            margin:12px 0; padding:12px; border:1px solid var(--ui-line);
                            border-radius:8px; background:var(--ui-muted-surface); }
.approval-history-filters[hidden] { display:none; }
.approval-history-filters label { display:grid; gap:5px; color:var(--ui-muted);
                                  font-size:12px; }
.approval-history-filters select,
.approval-history-filters input { min-height:34px; padding:6px 9px;
                                  border:1px solid var(--ui-line); border-radius:6px;
                                  color:var(--ui-text); font:inherit; }
.approvals-count-box {
  display:grid;
  min-width:122px;
  padding:10px 14px;
  border:1px solid var(--ui-warning-line);
  border-radius:9px;
  background:var(--ui-warning-soft);
  text-align:right;
}
.approvals-count-box strong { color:var(--ui-warning); font-size:23px; }
.approvals-count-box span { color:var(--ui-text-soft); font-size:12px; }
.approvals-filters { margin:16px 0; }
.approval-card {
  grid-template-columns:minmax(0,1fr) minmax(260px,.55fr);
  align-items:start;
  gap:13px 22px;
}
.approval-card-header, .approval-intent, .approval-consequence,
.approval-card > .approval-card-meta, .approval-decision-detail,
.approval-command { grid-column:1/-1; }
.approval-decision-detail {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  margin:0;
  overflow:hidden;
  border:1px solid var(--ui-line);
  border-radius:8px;
  background:var(--ui-line);
}
.approval-decision-detail > div {
  min-width:0;
  padding:10px 11px;
  background:var(--ui-muted-surface-strong);
}
.approval-decision-detail dt {
  color:var(--ui-muted);
  font:700 12px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.approval-decision-detail dd {
  margin:5px 0 0;
  overflow-wrap:anywhere;
  color:var(--ui-text-soft);
  font-size:12px;
}
.approval-preview, .approval-technical { grid-column:1; }
.approval-safety, .approval-actions { grid-column:2; }
.approval-actions {
  flex-wrap:wrap;
  align-self:end;
}
.approval-actions .button { min-height:38px; }
.approval-action-confirm {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  padding:9px;
  border:1px solid var(--ui-danger-line);
  border-radius:7px;
  background:var(--ui-danger-soft);
  color:var(--ui-text-soft);
  font-size:12px;
}
.approval-action-confirm span { margin-right:auto; }
.approval-action-feedback {
  grid-column:2;
  margin:0;
  padding:9px 11px;
  border:1px solid var(--ui-line);
  border-radius:7px;
  background:var(--ui-muted-surface);
  color:var(--ui-text-soft);
  font-size:12px;
}
.approval-action-feedback.error {
  border-color:var(--ui-danger-line);
  background:var(--ui-danger-soft);
  color:var(--ui-danger);
}
.approval-action-feedback.success { color:var(--ui-success); }
.approval-action-feedback.stale { color:var(--ui-warning); }
.approval-action-spinner {
  width:12px;
  height:12px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:approval-action-spin .7s linear infinite;
}
@keyframes approval-action-spin { to { transform:rotate(360deg); } }
.panel.approval-edit-dialog { width:min(680px,100%); height:auto; max-height:88vh; }
.approval-edit-dialog .modal-body { display:grid; gap:12px; }
.approval-edit-dialog label { display:grid; gap:6px; color:var(--ui-text-soft);
                              font-size:12px; font-weight:650; }
.approval-edit-dialog textarea { min-height:220px; resize:vertical; }
.approval-kind { text-transform:none; }
.approval-technical summary {
  font-weight:650;
  color:var(--ui-text-soft);
}
@media (max-width:760px) {
  .approval-card { grid-template-columns:1fr; gap:9px; padding:12px; }
  .approval-card > * { grid-column:1 !important; }
  .approvals-count-box { min-width:96px; }
  .approval-decision-detail { grid-template-columns:1fr 1fr; }
  .approval-actions {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
  }
  .approval-actions .button {
    min-width:0;
    padding-inline:7px;
    font-size:12px;
  }
}

/* T389 (doc 57): Approvals page visual system — scoped paint only.
   The shipped approval-card grid, 3px state left-border, padding, and
   background own structure; this layer adds type/radius/hover paint on
   #approvals-tab-scoped selectors. No shipped selector is redeclared. */
#approvals-tab .page-header-kicker { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-accent); }
#approvals-tab h2 { font-family: var(--font-ui); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ui-text); }
#approvals-tab .page-header p { font-family: var(--font-ui); font-size: 0.88rem; color: var(--ui-text-soft); }
#approvals-tab .approval-card { border-radius: 0.85rem; transition: background 140ms ease; }
#approvals-tab .approval-card:hover { background: var(--ui-panel-hover, var(--ui-hover)); }
#approvals-tab .approval-card h3 { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 650; }
#approvals-tab .approval-card .approval-meta, #approvals-tab .approval-card time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ui-muted); }
#approvals-tab .approval-card .button { font-family: var(--font-ui); font-weight: 600; }