/* ============================================================
   TraceLogic — Shared Stylesheet
   Design: Precision Industrial / Governance Terminal
   Font: DM Mono + DM Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── TOKENS ── */
:root {
  --bg:         #07090f;
  --bg2:        #0b0f1a;
  --surface:    #0f1623;
  --surface2:   #141d2e;
  --surface3:   #1a2438;
  --border:     #1e2d45;
  --border2:    #263650;
  --border3:    #2e4060;

  --accent:     #1d8cf0;
  --accent2:    #3ba0ff;
  --accent-dim: rgba(29,140,240,.12);

  --gold:       #e8a020;
  --gold-dim:   rgba(232,160,32,.12);

  --green:      #0db87a;
  --green-dim:  rgba(13,184,122,.12);

  --red:        #e8394a;
  --red-dim:    rgba(232,57,74,.1);

  --amber:      #f0852a;
  --amber-dim:  rgba(240,133,42,.1);

  --text:       #d8e4f0;
  --text2:      #8096b0;
  --text3:      #445566;
  --text4:      #2a3a50;

  --mono:       'DM Mono', monospace;
  --sans:       'DM Sans', sans-serif;

  --radius:     4px;
  --radius2:    6px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── SCANLINE OVERLAY ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,.08) 2px,
      rgba(0,0,0,.08) 4px
    );
  pointer-events: none;
}

/* Grid background */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(29,140,240,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,140,240,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* ── LAYOUT SHELL ── */
#shell {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 28px 80px;
}

/* ── TOPBAR ── */
#topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,9,15,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
}

.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.topbar-left { display: flex; align-items: center; gap: 16px; }

.logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}

.logo-hex {
  width: 28px; height: 28px;
  background: var(--accent);
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  flex-shrink: 0;
  position: relative;
}

.logo-hex::after {
  content: '';
  position: absolute; inset: 3px;
  background: var(--bg);
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}

.logo-wordmark {
  font-family: var(--mono);
  font-size: .88rem; font-weight: 500; letter-spacing: .12em;
  color: var(--text);
}
.logo-wordmark em { color: var(--accent); font-style: normal; }

.topbar-divider {
  width: 1px; height: 24px;
  background: var(--border2);
}

.topbar-module {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text3);
}

.topbar-right { display: flex; align-items: center; gap: 10px; }

/* ── BREADCRUMB NAV ── */
#breadcrumb {
  padding: 14px 28px 0;
  max-width: 1200px;
  margin: 0 auto;
}

.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
  scrollbar-width: none;
}
.breadcrumb-inner::-webkit-scrollbar { display: none; }

.bc-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
  cursor: default;
}

.bc-step.clickable { cursor: pointer; }
.bc-step.clickable:hover .bc-label { color: var(--accent2); }
.bc-step.clickable:hover .bc-num   { border-color: var(--accent2); color: var(--accent2); }

.bc-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .66rem;
  color: var(--text3);
  transition: all .25s;
  position: relative;
}

.bc-label {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text3);
  transition: color .25s;
}

.bc-sep {
  width: 28px; height: 1px;
  background: var(--border);
  margin: 0 4px; flex-shrink: 0;
}

/* States */
.bc-step.done .bc-num   { background: var(--green-dim); border-color: var(--green); color: var(--green); }
.bc-step.done .bc-label { color: var(--green); }

.bc-step.active .bc-num {
  background: var(--accent-dim); border-color: var(--accent); color: var(--accent);
}
.bc-step.active .bc-num::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: bc-pulse 2s infinite;
}
.bc-step.active .bc-label { color: var(--accent); }

@keyframes bc-pulse {
  0%   { transform: scale(1);   opacity: .5; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ── PAGE HEADER ── */
.page-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.page-header-left {}

.page-eyebrow {
  font-family: var(--mono);
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}

.page-title {
  font-family: var(--mono);
  font-size: 1.35rem; font-weight: 500; letter-spacing: .04em;
  color: var(--text); line-height: 1.2;
}

.page-sub {
  font-size: .82rem; color: var(--text2); margin-top: 5px; line-height: 1.5;
}

.page-header-right {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* ── PANEL ── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  overflow: hidden;
  margin-bottom: 20px;
  animation: panel-in .3s ease-out both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.panel:nth-child(2) { animation-delay: .05s; }
.panel:nth-child(3) { animation-delay: .10s; }
.panel:nth-child(4) { animation-delay: .15s; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.panel-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text2);
}

.panel-body { padding: 20px; }

.panel-footer {
  padding: 14px 20px;
  background: var(--surface2);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}

/* ── INDICATOR DOT ── */
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text3);
  flex-shrink: 0;
}
.dot.blue   { background: var(--accent); box-shadow: 0 0 8px rgba(29,140,240,.6); }
.dot.green  { background: var(--green);  box-shadow: 0 0 8px rgba(13,184,122,.6); }
.dot.gold   { background: var(--gold);   box-shadow: 0 0 8px rgba(232,160,32,.6); }
.dot.red    { background: var(--red);    box-shadow: 0 0 8px rgba(232,57,74,.6); }
.dot.amber  { background: var(--amber);  box-shadow: 0 0 8px rgba(240,133,42,.6); }
.dot.pulse  { animation: dot-pulse 1.6s ease-in-out infinite; }

@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.7); }
}

/* ── BADGE ── */
.badge {
  font-family: var(--mono);
  font-size: .63rem; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
}
.badge.blue   { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(29,140,240,.25); }
.badge.green  { background: var(--green-dim);  color: var(--green);  border: 1px solid rgba(13,184,122,.25); }
.badge.gold   { background: var(--gold-dim);   color: var(--gold);   border: 1px solid rgba(232,160,32,.25); }
.badge.red    { background: var(--red-dim);    color: var(--red);    border: 1px solid rgba(232,57,74,.25); }
.badge.amber  { background: var(--amber-dim);  color: var(--amber);  border: 1px solid rgba(240,133,42,.25); }
.badge.ghost  { background: transparent; color: var(--text3); border: 1px solid var(--border2); }

/* ── STATUS TAG (larger) ── */
.status-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: .74rem; font-weight: 500; letter-spacing: .08em;
  padding: 6px 14px; border-radius: var(--radius);
}
.status-tag .sdot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-tag.approve { background: var(--green-dim); color: var(--green); border: 1px solid rgba(13,184,122,.3); }
.status-tag.reject  { background: var(--red-dim);   color: var(--red);   border: 1px solid rgba(232,57,74,.3); }
.status-tag.pending { background: var(--gold-dim);  color: var(--gold);  border: 1px solid rgba(232,160,32,.3); }
.status-tag.info    { background: var(--accent-dim);color: var(--accent);border: 1px solid rgba(29,140,240,.3); }
.status-tag.warn    { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(240,133,42,.3); }

/* ── PILL (topbar) ── */
.pill {
  font-family: var(--mono);
  font-size: .66rem; letter-spacing: .1em;
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid var(--border2);
  color: var(--text3);
  white-space: nowrap;
}
.pill.green  { color: var(--green);  border-color: rgba(13,184,122,.3); }
.pill.blue   { color: var(--accent); border-color: rgba(29,140,240,.3); }
.pill.amber  { color: var(--amber);  border-color: rgba(240,133,42,.3); }
.pill.red    { color: var(--red);    border-color: rgba(232,57,74,.3); }

/* ── BUTTONS ── */
.btn {
  font-family: var(--mono);
  font-size: .74rem; font-weight: 500; letter-spacing: .07em;
  padding: 9px 20px; border-radius: var(--radius);
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .2s; white-space: nowrap;
}
.btn:disabled { opacity: .38; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent2); box-shadow: 0 0 24px rgba(29,140,240,.35); }

.btn-ghost { background: transparent; color: var(--text2); border: 1px solid var(--border2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--border3); color: var(--text); }

.btn-approve { background: var(--green-dim); color: var(--green); border: 1px solid rgba(13,184,122,.35); }
.btn-approve:hover:not(:disabled) { background: rgba(13,184,122,.22); box-shadow: 0 0 18px rgba(13,184,122,.2); }

.btn-reject  { background: var(--red-dim);   color: var(--red);   border: 1px solid rgba(232,57,74,.3); }
.btn-reject:hover:not(:disabled)  { background: rgba(232,57,74,.18);  box-shadow: 0 0 18px rgba(232,57,74,.2); }

.btn-gold    { background: var(--gold-dim);  color: var(--gold);  border: 1px solid rgba(232,160,32,.3); }
.btn-gold:hover:not(:disabled)    { background: rgba(232,160,32,.2); }

.btn-danger  { background: var(--red);       color: #fff; }
.btn-danger:hover:not(:disabled)  { box-shadow: 0 0 18px rgba(232,57,74,.4); }

.btn-logout  { background: rgba(232,57,74,.08); color: var(--red); border: 1px solid rgba(232,57,74,.25); }
.btn-logout:hover { background: rgba(232,57,74,.16); }

/* ── FORM ELEMENTS ── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field.span2 { grid-column: span 2; }
.field.span3 { grid-column: span 3; }

label {
  font-family: var(--mono);
  font-size: .63rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text3);
}

input, select, textarea {
  font-family: var(--mono); font-size: .8rem;
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 9px 12px; border-radius: var(--radius);
  outline: none; transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29,140,240,.1);
}
input::placeholder, textarea::placeholder { color: var(--text4); }
select option { background: var(--surface2); }
textarea { resize: vertical; line-height: 1.6; }

.field-note {
  font-family: var(--mono); font-size: .63rem; color: var(--text3); line-height: 1.4;
}

/* ── KV DISPLAY ── */
.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.kv-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
}
.kv-key {
  font-family: var(--mono); font-size: .61rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 5px;
}
.kv-val {
  font-family: var(--mono); font-size: .88rem; font-weight: 500; color: var(--text);
  word-break: break-word;
}
.kv-val.accent { color: var(--accent); }
.kv-val.green  { color: var(--green); }
.kv-val.red    { color: var(--red); }
.kv-val.gold   { color: var(--gold); }
.kv-val.amber  { color: var(--amber); }

/* ── GOVERNANCE TABLE ── */
.gov-table {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-top: 16px;
}
.gov-table-head {
  padding: 10px 16px;
  background: var(--gold-dim);
  border-bottom: 1px solid rgba(232,160,32,.2);
  display: flex; align-items: center; justify-content: space-between;
}
.gov-table-label {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
}
.gov-table-body { padding: 4px 0; }
.gov-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.gov-row:last-child { border-bottom: none; }
.gov-row-key {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text3); min-width: 180px; padding-top: 2px;
}
.gov-row-val {
  font-family: var(--mono); font-size: .79rem; color: var(--text2);
  flex: 1; word-break: break-all; line-height: 1.55;
}

/* ── RULE PATH ── */
.rule-path { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rule-node {
  font-family: var(--mono); font-size: .67rem;
  background: var(--accent-dim); color: var(--accent2);
  border: 1px solid rgba(29,140,240,.2);
  padding: 3px 9px; border-radius: 3px;
}
.rule-node::before { content: '→ '; opacity: .4; }
.rule-node:first-child::before { content: ''; }

/* ── ISSUE LISTS ── */
.issue-list { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.issue-item {
  font-family: var(--mono); font-size: .73rem;
  padding: 6px 12px; border-radius: var(--radius);
}
.issue-item.breach   { background: var(--amber-dim); color: var(--amber); border-left: 2px solid var(--amber); }
.issue-item.hardstop { background: var(--red-dim);   color: var(--red);   border-left: 2px solid var(--red); }

/* ── SOD BANNER ── */
.sod-banner {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--gold-dim); border: 1px solid rgba(232,160,32,.25);
  margin-bottom: 20px;
}
.sod-icon { font-size: 1.1rem; margin-top: 1px; flex-shrink: 0; }
.sod-text { font-size: .8rem; color: var(--text2); line-height: 1.6; }
.sod-text strong { color: var(--gold); font-weight: 500; }

/* ── TOKEN BOX ── */
.token-box {
  background: var(--bg2); border: 1px solid rgba(232,160,32,.35);
  border-radius: var(--radius); padding: 16px 18px;
}
.token-label {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.token-id {
  font-family: var(--mono); font-size: .82rem; color: var(--accent2);
  word-break: break-all; line-height: 1.6;
}
.token-meta {
  font-family: var(--mono); font-size: .67rem; color: var(--text3);
  margin-top: 12px; line-height: 1.9;
}

/* ── UPLOAD ZONE ── */
.upload-zone {
  border: 1px dashed var(--border2);
  border-radius: var(--radius2);
  padding: 36px 24px; text-align: center;
  cursor: pointer; transition: border-color .2s, background .2s;
  position: relative;
}
.upload-zone:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.upload-zone input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.upload-zone .uz-icon { font-size: 2rem; margin-bottom: 10px; opacity: .4; }
.upload-zone p  { font-size: .82rem; color: var(--text2); margin-bottom: 4px; }
.upload-zone small { font-family: var(--mono); font-size: .64rem; color: var(--text3); }

/* ── DIVIDER ── */
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.section-label {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 14px;
}

/* ── ACTION BAR ── */
.action-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding-top: 18px;
}
.action-bar-left  { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.action-bar-right { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── EXECUTION ROWS ── */
.exec-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.exec-row:last-child { border-bottom: none; }
.exec-label {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text3);
}
.exec-val { font-family: var(--mono); font-size: .83rem; font-weight: 500; color: var(--text); }

/* ── TOAST ── */
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  font-family: var(--mono); font-size: .74rem;
  padding: 11px 16px; border-radius: var(--radius); border-left: 3px solid;
  backdrop-filter: blur(12px); max-width: 420px; line-height: 1.4;
  pointer-events: all;
  animation: toast-in .25s ease-out, toast-out .3s ease-in 3.7s forwards;
}
.toast.error   { background: rgba(232,57,74,.18);  border-color: var(--red);    color: #ffb0b8; }
.toast.success { background: rgba(13,184,122,.14); border-color: var(--green);  color: #7aefc8; }
.toast.info    { background: rgba(29,140,240,.14); border-color: var(--accent); color: #90ccff; }
.toast.warn    { background: rgba(240,133,42,.14); border-color: var(--amber);  color: #ffc87a; }

@keyframes toast-in  { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(8px); } }

/* ── SPINNER ── */
.spinner {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,.2); border-top-color: currentColor;
  border-radius: 50%; animation: spin .55s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── EXPIRY BANNER ── */
#expiry-banner {
  display: none;
  align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--red-dim); border: 1px solid rgba(232,57,74,.3);
  border-radius: var(--radius); padding: 11px 16px; margin-bottom: 20px;
}
#expiry-banner.visible { display: flex; }
.expiry-text {
  font-family: var(--mono); font-size: .74rem; color: #ffb0b8; line-height: 1.5;
}

/* ── MISC ── */
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-28 { margin-top: 28px; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) { .three-col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .three-col { grid-template-columns: 1fr; } }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent2); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border3); }

/* ── AI Disclosure Banner (EU AI Act Art. 13 — mandatory transparency) ── */
.ai-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(29,140,240,.07);
  border-bottom: 1px solid rgba(29,140,240,.18);
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--text2);
  line-height: 1.5;
}
.ai-disclosure-icon {
  font-size: .85rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.ai-disclosure strong { color: var(--accent); font-weight: 600; }
.ai-disclosure-conf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: .62rem;
  font-weight: 600;
  border: 1px solid;
}
.ai-disclosure-conf.high   { color: var(--green); background: var(--green-dim); border-color: rgba(13,184,122,.25); }
.ai-disclosure-conf.medium { color: var(--gold);  background: var(--gold-dim);  border-color: rgba(232,160,32,.25); }
.ai-disclosure-conf.low    { color: var(--red);   background: var(--red-dim);   border-color: rgba(232,57,74,.25); }
.ai-disclosure-conf.na     { color: var(--text3); background: transparent;      border-color: var(--border2); }

/* ══════════════════════════════════════════════════════════════════════════
 * Responsive — mobile breakpoint at 760px.
 *
 * Scope: shared topbar, breadcrumb, page-content layout. Fixes the
 * collision visible on viewports below 760px wide where the topbar's
 * fixed 54px height + horizontal flex children + page padding designed
 * for desktop produced overlap with the page title block beneath.
 *
 * Discipline: additive only. No existing rule above modified. All
 * selectors targeted exist in the markup of every page that ships this
 * stylesheet (case, decision, execution, feedback, governance, intake,
 * manager, manager_dashboard, operator_dashboard, trust, trust_analytics).
 *
 * Reversibility: delete this entire @media block to return to pre-fix
 * behaviour.
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* Topbar — allow vertical growth when children wrap, tighten gap */
  #topbar {
    padding: 0 12px;
  }
  .topbar-inner {
    height: auto;
    min-height: 54px;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0;
  }
  .topbar-left {
    gap: 10px;
    flex-wrap: wrap;
  }
  .topbar-right {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* Pills — tighter padding so the row doesn't push children off-screen */
  .pill {
    padding: 4px 8px;
    font-size: .62rem;
  }

  /* Buttons in the topbar — slightly smaller hit area to fit the
     wrapped row, but still ~34px tall (acceptable on mobile, well
     above the 24px minimum). Rule scoped to topbar so it does not
     shrink action-bar buttons elsewhere on the page. */
  #topbar .btn {
    padding: 7px 12px;
    font-size: .68rem;
  }

  /* Breadcrumb — match topbar's narrower side padding so the inner
     scroll surface aligns with the rest of the page chrome */
  #breadcrumb {
    padding: 14px 12px 0;
  }

  /* Page content — give the title block its full text width on
     narrow screens. The 28px desktop padding consumes ~14% of a
     400px viewport; 12px is comfortable. */
  .page-content {
    padding: 0 12px 80px;
  }
}