/* =============================================================
   trova.css — Operator design system
   ============================================================= */

/* ── §01 DESIGN TOKENS ──────────────────────────────────────── */
:root {
  --bg:            #fafafb;
  --surface:       #ffffff;
  --surface-2:     #f4f5f7;
  --surface-3:     #eceef2;
  --border:        #e3e5ea;
  --border-strong: #c9ccd3;
  --text:          #15171c;
  --text-2:        #4a4e57;
  --text-3:        #8b8f99;
  --text-4:        #b0b3bc;

  --accent:        #2f5fde;
  --accent-2:      #1f3fa8;
  --accent-tint:   #eaf0fd;
  --accent-tint-2: #d9e3fb;

  --verified:      #1f7a4d;
  --verified-tint: #e3f3ea;
  --informed:      #b6701a;
  --informed-tint: #fcf1e0;
  --general:       #6a6e78;
  --general-tint:  #eef0f3;
  --danger:        #c4391a;
  --danger-tint:   #fde9e3;

  --radius:        6px;
  --radius-lg:     8px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-num:  'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(15,17,23,.04);
  --shadow-md: 0 1px 3px rgba(15,17,23,.06), 0 4px 12px rgba(15,17,23,.04);
  --shadow-lg: 0 4px 8px rgba(15,17,23,.08), 0 12px 32px rgba(15,17,23,.06);
}

/* ── §02 RESET / BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button  { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ── §03 TOPBAR ─────────────────────────────────────────────── */
.topbar {
  height: 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  flex-shrink: 0;
  min-width: 1280px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
  border-right: 1px solid var(--border);
  height: 100%;
  text-decoration: none;
}
.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--text);
  color: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.topnav { display: flex; gap: 2px; }
.topnav a {
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 500;
}
.topnav a:hover { background: var(--surface-2); color: var(--text); }
.topnav a.active { background: var(--surface-2); color: var(--text); }
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.tenant-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-2);
  background: var(--surface);
}
.tenant-pill .avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg,#f4a261,#e76f51);
  color: white;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar-signout {
  font-size: 12px;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius);
}
.topbar-signout:hover { color: var(--text); background: var(--surface-2); }
.topbar-profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  color: var(--text-3);
  text-decoration: none;
}
.topbar-profile-btn:hover,
.topbar-profile-btn.active { color: var(--text); background: var(--surface-2); }

/* ── §04 APP / WORKSPACE LAYOUT ─────────────────────────────── */
.app { display: flex; flex-direction: column; height: 100vh; overflow-x: auto; }

/* The 4-panel workspace grid */
.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 280px minmax(0,1fr) 360px;
  min-width: 1280px;
  min-height: 0;
  overflow: hidden;
}

/* ── §05 PANEL SHOW/HIDE (body classes) ─────────────────────── */
body.hide-sv .panel-sv { display: none; }
body.hide-sv .workspace { grid-template-columns: 280px minmax(0,1fr) 360px; min-width: 1060px; }
body.hide-sv .topbar    { min-width: 1060px; }

body.hide-builder .panel-builder { display: none; }
body.hide-builder .workspace { grid-template-columns: 220px minmax(0,1fr) 360px; min-width: 1000px; }
body.hide-builder .topbar    { min-width: 1000px; }

body.hide-chat .panel-chat { display: none; }
body.hide-chat .workspace { grid-template-columns: 220px 280px minmax(0,1fr); min-width: 920px; }
body.hide-chat .topbar    { min-width: 920px; }

body.hide-sv.hide-builder .workspace { grid-template-columns: minmax(0,1fr) 360px; min-width: 780px; }
body.hide-sv.hide-builder .topbar    { min-width: 780px; }
body.hide-sv.hide-chat .workspace    { grid-template-columns: 280px minmax(0,1fr); min-width: 700px; }
body.hide-sv.hide-chat .topbar       { min-width: 700px; }
body.hide-builder.hide-chat .workspace { grid-template-columns: 220px minmax(0,1fr); min-width: 640px; }
body.hide-builder.hide-chat .topbar    { min-width: 640px; }

body.chat-expanded .workspace     { grid-template-columns: 220px 280px minmax(0,1fr) 660px; }
body.hide-sv.chat-expanded .workspace { grid-template-columns: 280px minmax(0,1fr) 660px; }
body.hide-builder.chat-expanded .workspace { grid-template-columns: 220px minmax(0,1fr) 660px; }

/* ── §06 PANEL BASE ─────────────────────────────────────────── */
.panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  min-width: 0;
}
.p-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
  height: 48px;
}
.p-head-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.p-head-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  border-radius: 4px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 13px;
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ── §07 SEMANTIC VIEW PANEL ─────────────────────────────────── */
.panel-sv { border-right: 1px solid var(--border); }

.sv-context {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.sv-context .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.sv-context .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.sv-context .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}

.sv-search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sv-search input {
  width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  background: var(--surface-2);
  color: var(--text);
}
.sv-search input::placeholder { color: var(--text-4); }
.sv-search input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.sv-body { flex: 1; overflow-y: auto; padding: 4px 0 16px; }

.sv-section { margin-top: 6px; }
.sv-section-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 600;
  padding: 6px 14px 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sv-section-head .count {
  font-family: var(--font-mono);
  color: var(--text-4);
  font-weight: 500;
  font-size: 10px;
}

.sv-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  font-size: 12px;
  color: var(--text-2);
  border-left: 2px solid transparent;
  user-select: none;
}
.sv-field[draggable="true"] { cursor: grab; }
.sv-field[draggable="true"]:hover {
  background: var(--accent-tint);
  color: var(--text);
}
.sv-field.is-dim  { border-left-color: var(--general); }
.sv-field.is-met  { border-left-color: var(--accent); }
.sv-field.is-fact { border-left-color: var(--text-4); }
.sv-field.dragging { opacity: 0.45; cursor: grabbing; }
.sv-field .name { flex: 1; font-size: 12px; }
.sv-field .info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity .12s;
  cursor: default;
}
.sv-field .info-icon svg { width: 14px; height: 14px; }
.sv-field:hover .info-icon { opacity: 1; }
.sv-field.is-dim .info-icon { color: var(--general); }
.sv-field.is-met .info-icon { color: var(--accent); }
.sv-field-empty { font-size: 12px; color: var(--text-4); padding: 4px 14px; }

/* Field tooltip */
#field-tooltip {
  position: fixed;
  z-index: 1000;
  background: var(--text);
  color: var(--surface);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  width: 240px;
  font-size: 11.5px;
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .12s ease, transform .12s ease;
}
#field-tooltip.show { opacity: 1; transform: translateX(0); }
#field-tooltip::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 14px;
  width: 10px;
  height: 10px;
  background: var(--text);
  transform: rotate(45deg);
  border-radius: 1px;
}
#field-tooltip .ft-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
#field-tooltip .ft-name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  color: var(--surface);
}
#field-tooltip .ft-kind {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
#field-tooltip .ft-kind.dim  { background: rgba(255,255,255,.12); color: #d4d6dc; }
#field-tooltip .ft-kind.met  { background: rgba(99,144,246,.25); color: #a8c1f5; }
#field-tooltip .ft-kind.fact { background: rgba(255,255,255,.1); color: #b0b3bc; }
#field-tooltip .ft-desc { color: rgba(255,255,255,.85); margin-bottom: 6px; font-size: 11px; }
#field-tooltip .ft-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10.5px;
  padding-top: 5px;
  border-top: 1px solid rgba(255,255,255,.1);
}
#field-tooltip .ft-key {
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 9.5px;
  font-weight: 600;
}
#field-tooltip .ft-val {
  color: rgba(255,255,255,.9);
  font-family: var(--font-mono);
  text-align: right;
  font-size: 10px;
}

/* ── §08 BUILDER PANEL ──────────────────────────────────────── */
.panel-builder { border-right: 1px solid var(--border); }

.builder-tabs {
  display: flex;
  padding: 0 4px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  height: 48px;
  box-sizing: border-box;
}
.builder-tab {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.builder-tab:hover { color: var(--text); }
.builder-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.builder-tab .badge {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
}

.builder-tab-content { display: none; flex: 1; overflow-y: auto; flex-direction: column; }
.builder-tab-content.active { display: flex; }

/* Chart type SVG buttons */
.chart-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 12px 12px 0;
}
.chart-type {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 500;
  transition: all .12s;
  padding: 6px 2px;
}
.chart-type:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.chart-type.active {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.chart-type svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-type .ct-fill { fill: currentColor; stroke: none; opacity: 0.85; }
.chart-type.active svg { stroke: var(--accent); }
.chart-type.active .ct-fill { fill: var(--accent); }
.chart-type .ct-label { color: inherit; }

/* Chart picker (picker area wrapper) */
.chart-picker-section { padding: 12px 12px 14px; border-bottom: 1px solid var(--border); }
.chart-picker-hint { font-size: 11px; color: var(--text-3); margin-bottom: 10px; }

/* Builder sections (inside form state) */
.builder-section {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.builder-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.builder-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 600;
}
.field-stack { display: flex; flex-direction: column; gap: 10px; }
.field-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.field-label .req  { color: var(--danger); margin-left: 2px; }
.field-label .hint { color: var(--text-3); font-weight: 400; font-size: 10px; }

.input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}
.input:hover  { border-color: var(--border-strong); }
.input:focus  { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%238b8f99' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* Drop slots */
.drop-slot {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 6px 10px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 12px;
  color: var(--text-3);
  transition: all .12s;
}
.drop-slot.drag-over { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.drop-slot.invalid   { border-color: var(--danger); background: var(--danger-tint); color: var(--danger); }
.drop-slot.slot-eligible { border-color: var(--accent); border-style: dashed; }
.drop-slot.slot-eligible:not(.drag-over) { background: var(--accent-tint); opacity: 0.7; }
.drop-slot.has-value { border-style: solid; border-color: var(--border); background: var(--surface); color: var(--text); }
.slot-placeholder { color: var(--text-4); font-style: italic; font-size: 11px; }
.slot-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.slot-pill .kind-tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  flex-shrink: 0;
}
.slot-pill .kind-tag.dim  { background: var(--general-tint); color: var(--general); }
.slot-pill .kind-tag.met  { background: var(--accent-tint);  color: var(--accent); }
.slot-pill .field-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.slot-pill .x {
  width: 18px;
  height: 18px;
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 11px;
  border-radius: 3px;
  line-height: 1;
  flex-shrink: 0;
}
.slot-pill .x:hover { background: var(--surface-3); color: var(--danger); }

/* Builder actions */
.builder-actions {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  line-height: 1;
  transition: all .12s;
  white-space: nowrap;
}
.btn-primary   { background: var(--accent);  color: var(--surface); border-color: var(--accent);        flex: 1; }
.btn-primary:hover  { background: var(--accent-2); border-color: var(--accent-2); }
.btn-secondary { background: var(--surface); color: var(--text);    border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost     { background: transparent;    color: var(--text-2); }
.btn-ghost:hover    { background: var(--surface-2); color: var(--text); }
.btn-sm  { padding: 5px 9px; font-size: 11px; }
.btn-icon { padding: 5px; }

/* Legacy builder form styles (combo, waterfall, table, data_grid) */
.builder-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  display: block;
}
.builder-required { color: var(--danger); }
.builder-hint { font-size: 10px; color: var(--text-3); font-weight: 400; text-transform: none; letter-spacing: 0; }
.builder-hint-block { font-size: 11px; color: var(--text-3); padding: 6px 14px; }
.builder-errors { padding: 8px 14px; background: var(--danger-tint); border-bottom: 1px solid #f8c4b8; }
.builder-error  { font-size: 12px; color: var(--danger); margin-bottom: 2px; }
.builder-select {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
}
.builder-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
.cb-checkbox-row { display: flex; flex-direction: column; gap: 2px; }
.cb-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; }
.check-list { display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow-y: auto; }
.check-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); cursor: pointer; padding: 2px 0; }
.check-item input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.col-type-badge { font-size: 9px; color: var(--text-3); border: 1px solid var(--border); border-radius: 3px; padding: 0 3px; }
.col-type-badge.metric { color: var(--accent); border-color: var(--accent-tint-2); }
.table-col-note { font-size: 10px; color: var(--text-3); margin-bottom: 6px; }
.btn-add-filter {
  margin-top: 5px;
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: 1px dashed var(--accent-tint-2);
  border-radius: var(--radius);
  padding: 4px 10px;
  cursor: pointer;
  width: 100%;
}
.btn-add-filter:hover { background: var(--accent-tint); }
.size-opts { display: flex; flex-direction: column; gap: 4px; }
.size-opt { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); cursor: pointer; }
.gauge-range-row { display: flex; gap: 10px; }
.gauge-range-row > div { flex: 1; }
.gauge-range-input { width: 100%; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 12px; background: var(--surface); }

/* Text widget fields */
.text-content-input { resize: vertical; font-family: inherit; box-sizing: border-box; }
.text-style-row { display: flex; gap: 10px; align-items: flex-end; }
.text-style-row > div:first-child { flex: 1; }
.text-font-size-input { width: 100%; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 12px; background: var(--surface); }
.text-color-input { width: 36px; height: 30px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.chart-type-tabs { display: flex; flex-wrap: wrap; gap: 3px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.chart-tab { padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); font-size: 11px; color: var(--text-2); cursor: pointer; }
.chart-tab:hover  { background: var(--accent-tint); color: var(--accent); border-color: var(--accent-tint-2); }
.chart-tab.active { background: var(--accent-tint); color: var(--accent-2); border-color: var(--accent-tint-2); font-weight: 600; }
#widget-title-input { width: 100%; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 12px; font-family: inherit; color: var(--text); background: var(--surface); }
#widget-title-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
.combo-series-row { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; margin-bottom: 6px; background: var(--surface); }
.combo-row-fields { display: flex; gap: 4px; margin-bottom: 4px; }
.combo-metric { flex: 2; min-width: 0; }
.combo-render, .combo-axis { flex: 1; min-width: 0; }
.combo-row-secondary { display: flex; gap: 4px; align-items: center; }
.combo-label-input, .combo-stack-input { flex: 1; font-size: 11px; padding: 4px 6px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface); min-width: 0; }
.combo-remove-btn { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 12px; padding: 2px 4px; flex-shrink: 0; }
.combo-remove-btn:hover { color: var(--danger); }

/* ── §09 CANVAS ─────────────────────────────────────────────── */
.panel-canvas { background: var(--bg); }

.canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  height: 48px;
  flex-shrink: 0;
}
.canvas-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
}
.canvas-title:hover { background: var(--bg-2); }
.canvas-title-input {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 4px;
  outline: none;
  width: 220px;
}
.canvas-meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
}
.canvas-spacer { flex: 1; }

/* Panel toggle segmented control */
.panel-toggles {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.panel-toggle {
  width: 26px;
  height: 22px;
  border: none;
  background: none;
  border-radius: 3px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.panel-toggle:hover { color: var(--text); }
.panel-toggle.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* Save button pill — hidden until unsaved changes exist */
.save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: transparent;
  color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  cursor: default;
  visibility: hidden;
}
.save-btn.unsaved {
  visibility: visible;
  background: #cc5500;
  color: #fff;
  border-color: #cc5500;
  cursor: pointer;
}
.save-btn.saving {
  visibility: visible;
  background: var(--surface-3);
  color: var(--text-2);
  border-color: var(--border);
  cursor: default;
}
.save-btn .dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.save-btn.unsaved .dot { background: rgba(255, 255, 255, 0.6); }
.save-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── §10b FILTER HEADER BAR — interactive controls ─────────── */
.filter-header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  min-height: 36px;
}
.filter-bar-hidden { display: none !important; }

/* One section per filter dimension */
.fv-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 0;
  border-right: 1px solid var(--border);
  margin-right: 12px;
  position: relative;
}
.fv-section:last-child { border-right: none; margin-right: 0; }

.fv-dim-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  white-space: nowrap;
}

/* Remove button (×) for each filter section */
.fv-remove {
  width: 16px; height: 16px;
  border: none; background: none;
  color: var(--text-4); font-size: 10px;
  border-radius: 3px; line-height: 1;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.fv-remove:hover { background: var(--surface-3); color: var(--danger); }

/* Categorical chip form wrapper */
.fv-chip-form { display: flex; align-items: center; gap: 3px; }

/* Individual value chips (selected = on, deselected = off) */
.fv-chip {
  padding: 2px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--surface);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  line-height: 1.5;
}
.fv-chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fv-chip:hover:not(.on) { background: var(--surface-2); border-color: var(--text-3); color: var(--text); }
.fv-sel-inputs { display: none; }   /* hidden inputs, not rendered */

/* ────────── Date filter trigger (collapsed, in filter bar) ────────── */
.fv-section-date {
  position: relative;
  gap: 8px;
}

.fv-date-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font-family: inherit;
}
.fv-date-trigger:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.fv-date-trigger.open {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}

.fv-trigger-active {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
}
.fv-trigger-active.custom {
  font-style: italic;
  font-weight: 500;
}

.fv-trigger-sep {
  color: var(--text-4);
  font-size: 11px;
}
.fv-date-trigger.open .fv-trigger-sep {
  color: var(--accent);
  opacity: 0.5;
}

.fv-trigger-range {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.fv-date-trigger.open .fv-trigger-range {
  color: var(--accent-2);
}
.fv-trigger-range .arr {
  color: var(--text-4);
  margin: 0 3px;
}
.fv-date-trigger.open .fv-trigger-range .arr {
  color: var(--accent);
  opacity: 0.6;
}
.fv-trigger-range.empty {
  font-family: inherit;
  font-style: italic;
  color: var(--text-4);
  font-size: 11px;
}

.fv-trigger-duration {
  font-size: 10px;
  color: var(--text-3);
  font-style: italic;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.fv-date-trigger.open .fv-trigger-duration {
  color: var(--accent);
  border-left-color: var(--accent-tint-2);
}

.fv-trigger-caret {
  color: var(--text-3);
  margin-left: 2px;
}
.fv-date-trigger.open .fv-trigger-caret {
  color: var(--accent);
}

/* ────────── Popover ────────── */
.fv-date-popover-wrap {
  position: relative;
  display: inline-flex;
}
.fv-date-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 8px rgba(15,17,23,0.08), 0 12px 32px rgba(15,17,23,0.06);
  z-index: 200;
  overflow: hidden;
}
.fv-date-popover::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 26px;
  width: 10px;
  height: 10px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.fv-date-popover[hidden] { display: none; }

/* ────────── Date filter component (shared bar/panel) ────────── */
.df-component {
  display: flex;
  flex-direction: column;
}
.df-component-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.df-component-section:last-child {
  border-bottom: none;
}

/* Resolved date readback header */
.df-resolved-header {
  background: var(--surface-2);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.df-resolved-header .label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.df-resolved-header .value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.df-resolved-header .value .arr { color: var(--text-4); }
.df-resolved-header .value .duration {
  font-family: inherit;
  font-style: italic;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 400;
}

/* Mode tabs — segmented control */
.df-mode-tabs {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.df-tab {
  flex: 1;
  padding: 5px 8px;
  border: none;
  background: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  line-height: 1.4;
  transition: color 0.12s, background 0.12s;
}
.df-tab:hover { color: var(--text); }
.df-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15,17,23,0.04);
  font-weight: 600;
}

/* Mode-specific input rows */
.df-mode-panel {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.df-mode-panel[hidden] { display: none; }
.df-rel-label,
.df-mode-label {
  font-size: 12px;
  color: var(--text-2);
}

/* Stepper number input */
.df-stepper {
  display: inline-flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  height: 30px;
}
.df-stepper .step {
  width: 22px;
  border: none;
  background: var(--surface);
  color: var(--text-3);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.df-stepper .step:hover { background: var(--surface-2); color: var(--text); }
.df-stepper .step:not(:last-child),
.df-stepper .step + input { border-right: 1px solid var(--border); }
.df-stepper input {
  width: 38px;
  border: none;
  background: transparent;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  -moz-appearance: textfield;
}
.df-stepper input::-webkit-outer-spin-button,
.df-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.df-stepper input:focus { outline: none; }

/* Select (period in Relative mode) */
.df-select {
  height: 30px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%238b8f99' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  font-family: inherit;
}
.df-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Styled date input wrapper (Range / Starting / Ending modes) */
.df-date-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  flex: 1;
  min-width: 130px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.df-date-input:hover { border-color: var(--text-3); }
.df-date-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.df-date-input svg {
  width: 14px;
  height: 14px;
  color: var(--text-3);
  flex-shrink: 0;
  pointer-events: none;
}
.df-date-input .display {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.df-date-input input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  z-index: 1;
}

/* Apply button */
.df-apply-row {
  padding-top: 10px;
}
.df-apply-btn {
  width: 100%;
  padding: 7px 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s;
}
.df-apply-btn:hover { opacity: 0.88; }
.df-apply-btn:active { opacity: 0.75; }

/* Range row layout */
.df-range-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.df-range-row .arrow {
  color: var(--text-3);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}

/* ────────── Panel layout (chart builder, 280px) ────────── */
.df-layout-panel .df-resolved-header {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 0 0 12px;
  padding: 10px 12px;
}
.df-layout-panel .df-resolved-header .value { font-size: 12px; }
.df-layout-panel .df-component-section {
  padding: 0;
  border-bottom: none;
  margin-bottom: 12px;
}
.cb-date-filter-wrap { margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.cb-date-filter-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }

/* Numeric filter */
.fv-num-form { display: flex; align-items: center; gap: 4px; }
.fv-num-input {
  width: 72px; font-size: 11px; padding: 2px 6px;
  border: 1px solid var(--border-strong); border-radius: 3px;
  background: var(--surface); color: var(--text);
}
.fv-num-sep { color: var(--text-3); font-size: 11px; }

/* Boolean filter (three radio chips: All / Yes / No) */
.fv-bool-form { display: flex; gap: 3px; align-items: center; }

/* High-cardinality dropdown */
.fv-hc-wrap { position: relative; }
.fv-hc-toggle {
  padding: 2px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  white-space: nowrap;
}
.fv-hc-toggle:hover { background: var(--surface-2); }
.fv-hc-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  padding: 8px;
  min-width: 200px;
}
.fv-hc-search {
  width: 100%; box-sizing: border-box;
  padding: 4px 8px; font-size: 11px;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface); color: var(--text);
  margin-bottom: 6px;
}
.fv-hc-list { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.fv-hc-item { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 2px; font-size: 11px; cursor: pointer; }
.fv-hc-item:hover { background: var(--surface-2); }
.fv-hc-item input[type=checkbox] { margin: 0; cursor: pointer; }
.fv-hc-actions { display: flex; gap: 4px; margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
.fv-hc-action-btn { flex: 1; font-size: 10px; padding: 3px 4px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-2); color: var(--text-2); cursor: pointer; text-align: center; }
.fv-hc-action-btn:hover { background: var(--surface-3); }
.fv-hc-apply { flex: 1; font-size: 10px; padding: 3px 4px; border: none; border-radius: 3px; background: var(--accent); color: #fff; cursor: pointer; font-weight: 600; }
.fv-hc-apply:hover { background: var(--accent-2); }

/* Canvas scroll area */
.canvas-scroll { padding: 16px; flex: 1; overflow-y: auto; }
.dashboard-canvas { min-height: 100%; }

/* Gridstack */
.grid-stack { background: transparent; }
.grid-stack-item-content { border-radius: 0; background: transparent; overflow: hidden; }
/* Position SE/SW resize handles at the correct corner (missing from vendor CSS) */
.grid-stack-item > .ui-resizable-se { bottom: 0; right: 0; }
.grid-stack-item > .ui-resizable-sw { bottom: 0; left: 0; }

/* ── §10 WIDGET CHROME ──────────────────────────────────────── */
.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow .15s, border-color .15s;
  position: relative;
}
.widget:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.w-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  flex-shrink: 0;
  gap: 8px;
}
.w-title-block {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.w-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.w-title:hover { text-decoration: underline; color: var(--accent); }
.w-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity .12s;
}
.widget:hover .w-actions { opacity: 1; }

.w-body {
  flex: 1;
  padding: 0 14px 14px;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.w-body.metric  { justify-content: center; }
.w-body.no-pad  { padding: 0; }
.w-body.text    { padding: 0; }
.widget-text-content {
  width: 100%; height: 100%; box-sizing: border-box;
  padding: 12px 16px; overflow: auto; cursor: pointer;
  white-space: pre-wrap; word-break: break-word;
  line-height: 1.4;
}
/* Text widgets have no header bar (content-only, no title) -- the delete icon floats
   over the content instead, revealed on hover like .w-actions does for other widgets.
   A translucent backdrop keeps it visible regardless of the widget's own bg/text color. */
.widget-text-delete {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  opacity: 0; transition: opacity .12s;
  background: rgba(255, 255, 255, .85); backdrop-filter: blur(2px);
  box-shadow: var(--shadow-sm);
}
.widget:hover .widget-text-delete { opacity: 1; }

/* Trust badge — icon-only circle with tooltip */
.trust {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  cursor: help;
}
.trust svg { width: 11px; height: 11px; display: block; }
.trust .tt {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  background: var(--text);
  color: var(--surface);
  font-size: 10px;
  font-weight: 500;
  padding: 4px 7px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s, transform .12s;
  z-index: 50;
}
.trust .tt::before {
  content: '';
  position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%);
  border: 3px solid transparent;
  border-bottom-color: var(--text);
}
.trust:hover .tt { opacity: 1; transform: translateX(-50%) translateY(0); }
.trust.verified, .trust.trust--verified { background: var(--verified-tint); color: var(--verified); }
.trust.informed, .trust.trust--informed { background: var(--informed-tint); color: var(--informed); }
.trust.general,  .trust.trust--general  { background: var(--general-tint);  color: var(--general); }

/* Widget filter indicator */
.widget-filter-badge { font-size: 10px; color: var(--accent); cursor: default; line-height: 1; }
.widget-filter-badge.muted { color: var(--text-4); }

/* Widget error */
.widget-error { font-size: 12px; color: var(--danger); background: var(--danger-tint); padding: 12px; border-radius: 4px; width: 100%; }

/* KPI / Metric card */
.kpi-value {
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-3);
}
.kpi-comparison { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; }
.kpi-comparison.good { color: #3ba272; }
.kpi-comparison.bad  { color: #ee6666; }
.kpi-delta { font-weight: 700; }

/* Widget grid (native table) */
.widget-grid-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tgrid-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tgrid-scroll { flex: 1; min-height: 0; overflow: auto; }
.tgrid-foot {
  flex-shrink: 0;
  padding: 6px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-4);
  background: var(--surface);
}

table.tgrid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }

/* header */
.tgrid thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-2);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  color: var(--text-3); text-align: left; padding: 8px 12px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
  cursor: pointer; user-select: none;
}
.tgrid thead th:first-child { padding-left: 16px; }
.tgrid thead th:last-child  { padding-right: 16px; }
.tgrid thead th.num { text-align: right; }
.tgrid thead th:hover { color: var(--text); }
.tgrid thead th.sorted { color: var(--text); }
.sort-ind {
  display: inline-flex; width: 12px; height: 12px; margin-left: 3px; vertical-align: middle;
  opacity: 0; transition: opacity 0.12s, transform 0.12s; color: var(--text-3);
}
.sort-ind svg { width: 12px; height: 12px; }
.tgrid thead th:hover .sort-ind { opacity: 0.45; }
.sort-ind.on { opacity: 1; color: var(--accent); }
.sort-ind.on.asc { transform: rotate(180deg); }

/* cells */
.tgrid tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tgrid tbody td:first-child { padding-left: 16px; }
.tgrid tbody td:last-child  { padding-right: 16px; }
.tgrid td.num { text-align: right; }
.tgrid tbody tr:hover td { background: var(--surface-2); }

/* totals row */
.tgrid tfoot td {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--surface-2); border-top: 1px solid var(--border-strong);
  padding: 8px 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tgrid tfoot td:first-child { padding-left: 16px; }
.tgrid tfoot td:last-child  { padding-right: 16px; }
.tgrid tfoot td.num { text-align: right; }
.tgrid tfoot td.t-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); font-weight: 700; }
.t-tag { font-family: var(--mono, monospace); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); font-weight: 600; margin-right: 5px; }

/* group rows */
.g-row td { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.g-row.collapsed td { border-bottom-color: var(--border-strong); }
.g-head-cell {
  cursor: pointer; display: flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 16px; white-space: nowrap;
}
.g-caret { display: inline-flex; width: 13px; height: 13px; color: var(--text-3); transition: transform 0.14s; flex-shrink: 0; }
.g-caret svg { width: 13px; height: 13px; }
.g-caret.open { transform: rotate(90deg); }
.g-name { font-weight: 600; color: var(--text); font-size: 12px; }
.g-count {
  font-size: 10px; color: var(--text-3); font-weight: 500;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 6px; line-height: 16px;
}
.g-sub { color: var(--text-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.g-sub.num { text-align: right; }

/* qb_pnl widget */
.qbpnl-meta {
  flex-shrink: 0; padding: 6px 16px; font-size: 11px; color: var(--text-3);
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.qbpnl-scroll { flex: 1; min-height: 0; overflow: auto; }
.qbpnl-col-amt { width: 140px; }

.qbpnl-table .pnl-num {
  font-variant-numeric: tabular-nums; text-align: right; width: 140px;
}

.qbpnl-row td { padding: 7px 12px; border-bottom: 1px solid var(--border); }

.qbpnl-row[data-row-type="section_header"][data-depth="0"] td {
  background: var(--surface-2); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-2); font-weight: 500;
}
.qbpnl-row[data-row-type="section_header"]:not([data-depth="0"]) td {
  font-weight: 500; color: var(--text);
}
.qbpnl-row[data-row-type="account"] td { font-weight: 400; color: var(--text); }
.qbpnl-row[data-row-type="subtotal"] td {
  font-weight: 600; color: var(--text); border-top: 0.5px solid var(--border);
}
.qbpnl-row[data-row-type="section_total"] td {
  font-weight: 600; color: var(--text);
  border-top: 0.5px solid var(--border-strong); background: var(--surface-2);
}
.qbpnl-row[data-row-type="computed_total"] td {
  font-weight: 600; font-size: 14px; color: var(--text);
  border-top: 0.5px solid var(--border-strong); border-bottom: 0.5px solid var(--border-strong);
  padding: 10px 12px; background: var(--surface-2);
}
.qbpnl-row[data-row-type="computed_total"][data-final="true"] td {
  border-bottom: 3px double var(--border-strong);
}
.qbpnl-row[data-row-type="spacer"] td { height: 10px; padding: 0; border: none; background: transparent; }

.qbpnl-caret {
  display: inline-block; width: 10px; color: var(--text-3); font-size: 8px;
  margin-right: 6px; transition: transform 0.15s; text-align: center; user-select: none;
}
.qbpnl-row.collapsed .qbpnl-caret { transform: rotate(-90deg); }
.qbpnl-row[data-collapse-target] { cursor: pointer; }

.qbpnl-empty-cell {
  text-align: center; padding: 40px 16px; color: var(--text-3); font-size: 13px; border: none;
}

/* export dropdown (in widget header) */
.export-wrap { position: relative; }
.grid-export-menu {
  position: absolute; top: calc(100% + 6px); right: 0; width: 160px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 8px);
  box-shadow: 0 4px 8px rgba(15,17,23,0.08), 0 12px 32px rgba(15,17,23,0.06);
  z-index: 50; padding: 5px; overflow: hidden;
}
.export-menu-lbl {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-4); padding: 5px 8px 4px; font-weight: 600;
}
.grid-export-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: none; cursor: pointer; text-align: left;
  padding: 7px 8px; border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--text);
}
.grid-export-menu button:hover { background: var(--surface-2); }
.grid-export-menu button svg { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; }
.grid-export-menu .ext { margin-left: auto; font-size: 10px; color: var(--text-4); }

/* Canvas empty state */
.canvas-empty { padding: 60px 24px; text-align: center; color: var(--text-3); font-size: 13px; }

/* ── §11 GLOBAL FILTER MANAGEMENT IN BUILDER ────────────────── */
.cb-filter-section    { border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.cb-filter-section-hd { padding: 8px 14px 4px; }
.cb-section-title     { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; }
.cb-add-btn-wrap { padding: 4px 14px 2px; }
.btn-add-gf {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 11px; color: var(--accent); background: none;
  border: 1px dashed var(--accent-tint-2); border-radius: var(--radius);
  padding: 5px 8px; cursor: pointer;
}
.btn-add-gf:hover { background: var(--accent-tint); }
.cb-active-filters { padding: 2px 14px 6px; display: flex; flex-direction: column; gap: 4px; }
.cb-filter-chip {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--accent-tint); border: 1px solid var(--accent-tint-2);
  border-radius: var(--radius); padding: 4px 8px; font-size: 11px; color: var(--accent-2);
}
.cb-chip-label   { flex: 1; }
.cb-chip-remove  { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1; flex-shrink: 0; }
.cb-chip-remove:hover { color: var(--danger); }
.cb-filter-empty { font-size: 12px; color: var(--text-4); padding: 4px 14px 8px; }
/* Add-filter form (dimension-only picker) */
.gf-add-form-wrap { padding: 6px 14px 8px; border-top: 1px solid var(--border); }
.gf-actions { display: flex; gap: 6px; margin-top: 8px; }
.btn-gf-apply { flex: 1; padding: 5px 8px; background: var(--accent); color: var(--surface); border: none; border-radius: var(--radius); font-size: 11px; font-weight: 600; cursor: pointer; }
.btn-gf-apply:hover { background: var(--accent-2); }
.btn-gf-clear { flex: 1; padding: 5px 8px; background: var(--surface); color: var(--text-2); border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 11px; cursor: pointer; }
.btn-gf-clear:hover { background: var(--surface-2); }
.widget-filter-badge-text { font-size: 10px; color: var(--accent); cursor: default; }

/* Widget Filters section (inline in Chart Builder Chart tab, Apply-gated).
   Compact popover redesign — see design_handoffs/widget_filters/README.md. Each filter
   collapses to a one-line trigger (.ftrig); clicking opens a floating popover (.fpop)
   that gets reparented to <body> with position:fixed while open (see wfTogglePopover in
   dashboard.html) because .panel / #cb-builder-section both clip overflow, which would
   otherwise cut off a plain position:absolute popover. */
.wf-section { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 0; }
.wf-control { position: relative; margin: 0 14px 10px; }
.wf-control:last-of-type { margin-bottom: 4px; }
.wf-hc-wrap { position: static; }
.wf-apply-row { padding: 8px 14px 4px; }
.wf-local-confirm { display: block; font-size: 11px; color: var(--text-3); margin-top: 6px; }

/* Trigger row */
.ftrig {
  display: flex; align-items: center; gap: 6px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 8px 10px; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.ftrig:hover { border-color: var(--border-strong); }
.ftrig.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.fdim {
  font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-3); font-weight: 700; flex-shrink: 0;
}
.fsummary { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 5px; overflow: hidden; white-space: nowrap; }
.fsummary .fpreset { font-size: 12px; font-weight: 600; color: var(--text); }
.fsummary .frange { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.fremove {
  width: 18px; height: 18px; border: none; background: none; color: var(--text-4);
  border-radius: 4px; flex-shrink: 0; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; padding: 0;
}
.fremove:hover { background: var(--surface-3); color: var(--danger); }
.fremove svg { width: 11px; height: 11px; }
.fchev { width: 12px; height: 12px; color: var(--text-3); flex-shrink: 0; }
.fchev svg { width: 12px; height: 12px; }

/* Popover editor */
.fpop {
  width: 252px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 12px;
  z-index: 500; display: none;
}
.fpop.show { display: block; }
.fpop-title {
  font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-3); font-weight: 700; margin-bottom: 8px;
}

.showing { background: var(--surface-2); border-radius: 6px; padding: 6px 9px; margin-bottom: 8px; font-size: 11px; color: var(--text-3); }
.showing b { color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Select control (date preset picker; reused for numeric unit select) */
.fselect {
  width: 100%; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 12px; font-weight: 500;
  padding: 7px 26px 7px 9px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8f99' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 12px;
}
.fselect:focus { outline: none; border-color: var(--accent); }

/* Segmented Relative/Range toggle */
.mode-seg { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px; margin-top: 8px; }
.mode-seg button { flex: 1; border: none; background: none; font-size: 10.5px; font-weight: 500; color: var(--text-3); padding: 4px 4px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.mode-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }

/* Relative stepper row */
.stepper-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.stepper-row .lbl { font-size: 11.5px; color: var(--text-2); flex-shrink: 0; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.stepper button { width: 22px; height: 26px; border: none; background: var(--surface-2); color: var(--text-2); font-size: 13px; cursor: pointer; line-height: 1; }
.stepper button:hover { background: var(--surface-3); }
.stepper input { width: 30px; height: 26px; border: none; text-align: center; font-size: 12px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.stepper input:focus { outline: none; }
.unit-select { flex: 1; min-width: 0; }

/* Range date pickers (date Range mode) and numeric min/max -- shared primitive */
.range-inputs { display: flex; gap: 6px; margin-top: 8px; }
.range-inputs input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; font-size: 11.5px; color: var(--text); }
.range-inputs input:focus { outline: none; border-color: var(--accent); }

/* Chip row -- text (low-cardinality) and boolean -- shared primitive */
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-row button { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; font-size: 10.5px; font-weight: 500; color: var(--text-2); padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.chip-row button.on { background: var(--text); border-color: var(--text); color: #fff; font-weight: 600; }

/* ── §12 CHAT PANEL ─────────────────────────────────────────── */
.panel-chat { background: var(--surface); }
.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  height: 48px;
  box-sizing: border-box;
}
.chat-expand-btn { background: none; border: none; font-size: 14px; color: var(--text-3); cursor: pointer; padding: 0 2px; line-height: 1; }
.chat-expand-btn:hover { color: var(--accent); }

.chat-usage { font-size: 10px; font-weight: 500; color: var(--text-3); text-transform: none; letter-spacing: 0; }
.chat-usage--warning { color: var(--informed); }
.chat-usage--limit   { color: var(--danger); }

.panel-chat .message-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panel-chat .message-list:empty::before {
  content: 'Ask a question about your data.';
  display: block;
  text-align: center;
  color: var(--text-4);
  font-size: 13px;
  margin-top: 40px;
}

.panel-chat .message { display: flex; flex-direction: column; gap: 3px; max-width: 100%; }
.panel-chat .message.user      { align-items: flex-end; }
.panel-chat .message.assistant { align-items: flex-start; }
.panel-chat .bubble {
  padding: 7px 11px;
  border-radius: 11px;
  line-height: 1.5;
  max-width: 92%;
  word-break: break-word;
  font-size: 12px;
}
.panel-chat .message.user .bubble {
  background: var(--accent);
  color: white;
  border-bottom-right-radius: 3px;
  white-space: pre-wrap;
}
.panel-chat .message.assistant .bubble {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 3px;
}
.panel-chat .bubble.markdown p                { margin: 0 0 0.5em; }
.panel-chat .bubble.markdown p:last-child     { margin-bottom: 0; }
.panel-chat .bubble.markdown ul,
.panel-chat .bubble.markdown ol               { margin: 0 0 0.5em 1.1em; }
.panel-chat .bubble.markdown strong           { font-weight: 600; }
.panel-chat .bubble.markdown code             { font-family: var(--font-mono); font-size: 10px; background: var(--surface-3); padding: 1px 3px; border-radius: 3px; }

/* Provenance / trust row in chat */
.panel-chat .provenance-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.panel-chat .analysis-summary { font-size: 10px; color: var(--text-3); }

/* Message feedback buttons (thumbs up / down) */
.feedback-buttons { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; }
.feedback-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  border: none; background: none; border-radius: 3px;
  color: var(--text-4); cursor: pointer;
  transition: color 0.1s, background 0.15s;
}
.feedback-btn:hover { color: var(--text-2); background: var(--surface-2); }
.feedback-btn.selected { color: var(--verified); }
.feedback-btn.negative.selected { color: var(--general); }

/* Thinking indicator */
.thinking-bubble {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 7px 11px;
  background: var(--surface-2);
  border-radius: 11px;
  border-bottom-left-radius: 3px;
  width: fit-content;
}
.thinking-bubble span {
  width: 6px;
  height: 6px;
  background: var(--text-3);
  border-radius: 50%;
  display: inline-block;
  animation: thinking-dot 1.2s infinite ease-in-out;
}
.thinking-bubble span:nth-child(2) { animation-delay: .2s; }
.thinking-bubble span:nth-child(3) { animation-delay: .4s; }
@keyframes thinking-dot {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* Chat chart bubbles */
.panel-chat .chart-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 8px; width: 100%; }
.panel-chat .chart-title  { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.panel-chat .chart-container { width: 100%; height: 160px; }

/* Pin dialog */
.pin-trigger-area  { margin-top: 3px; }
.pin-trigger-btn { font-size: 11px; color: var(--accent); background: none; border: 1px solid var(--accent-tint-2); border-radius: var(--radius); padding: 3px 9px; cursor: pointer; }
.pin-trigger-btn:hover { background: var(--accent-tint); }
.pin-confirmation { font-size: 12px; color: var(--verified); font-weight: 600; padding: 3px 0; }
.pin-dialog { margin-top: 7px; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pin-dialog-row   { margin-bottom: 7px; }
.pin-dialog-label { font-size: 10px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.pin-dialog input[type="text"] { width: 100%; padding: 5px 7px; border: 1px solid var(--border-strong); border-radius: 4px; font-size: 12px; font-family: inherit; color: var(--text); }


/* ── §13 TENANT ADMIN PORTAL ────────────────────────────────── */
/*
   Governance surface: people, data access, usage. Two conventions carry
   meaning here and are worth not undoing.

   1. Mono vs sans is the boundary between what an admin NAMES and what
      Snowflake IS. Display names, people, and prose set in Inter; view names,
      role slugs, token counts, and timestamps set in mono. Reach for .mg-mono
      on identifiers, never for emphasis.

   2. Trust colours (--verified / --informed / --general) mean grounding level
      everywhere else in the product and are deliberately NOT reused here. A
      granted or active state uses --accent; absence uses the greys.
*/

.mg-page { flex: 1; display: flex; overflow: hidden; min-height: 0; background: var(--bg); }

/* Section rail */
.mg-rail {
  width: 208px; flex-shrink: 0; display: flex; flex-direction: column;
  gap: 2px; padding: 20px 12px; background: var(--surface);
  border-right: 1px solid var(--border); overflow-y: auto;
}
.mg-rail-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); padding: 0 10px 10px;
}
.mg-rail-link {
  display: block; padding: 7px 10px; border-radius: var(--radius);
  font-size: 13px; color: var(--text-2); text-decoration: none;
  border-left: 2px solid transparent;
}
.mg-rail-link:hover { background: var(--surface-2); color: var(--text); }
.mg-rail-link.is-active {
  background: var(--accent-tint); color: var(--accent-2);
  font-weight: 600; border-left-color: var(--accent);
}
.mg-rail-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.mg-rail-foot { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--border); }
.mg-rail-tenant { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.mg-rail-stat { font-size: 11px; color: var(--text-3); line-height: 1.7; }
.mg-rail-back {
  display: inline-block; margin-top: 12px; font-size: 11px;
  color: var(--accent); text-decoration: none;
}
.mg-rail-back:hover { text-decoration: underline; }

/* Content column */
.mg-content { flex: 1; overflow-y: auto; padding: 28px 32px 64px; }
.mg-head { max-width: 940px; margin-bottom: 20px; }
.mg-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.mg-lede { font-size: 13px; color: var(--text-2); margin-top: 5px; }

.mg-messages { max-width: 940px; margin-bottom: 16px; }
.mg-alert {
  font-size: 13px; padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-2); margin-bottom: 8px;
}
.mg-alert-success { background: var(--accent-tint); border-color: var(--accent-tint-2); color: var(--accent-2); }
.mg-alert-error   { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); }

.mg-card {
  max-width: 940px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 20px 22px; margin-bottom: 16px;
}
.mg-card-head { margin-bottom: 16px; }
.mg-card-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mg-card h2 { font-size: 14px; font-weight: 600; color: var(--text); }
.mg-card h3 { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }

.mg-mono { font-family: var(--font-mono); font-size: .92em; }
.mg-num  { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.mg-hint { font-size: 11.5px; color: var(--text-3); line-height: 1.6; margin-top: 4px; }
.mg-hint a { color: var(--accent); }
.mg-nowrap { white-space: nowrap; }
.mg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mg-empty { font-size: 13px; color: var(--text-3); padding: 20px 0; text-align: center; }
.mg-empty-inline { padding: 6px 0; text-align: left; }
.mg-foot-note {
  font-size: 11.5px; color: var(--text-3); line-height: 1.6;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.mg-foot-note a { color: var(--accent); }

/* Buttons */
.mg-btn {
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 13px;
  border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; text-decoration: none; display: inline-block;
}
.mg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mg-btn-primary { background: var(--accent); color: #fff; }
.mg-btn-primary:hover { background: var(--accent-2); }
.mg-btn-quiet { background: var(--surface); color: var(--text-2); border-color: var(--border-strong); }
.mg-btn-quiet:hover { background: var(--surface-2); color: var(--text); }
.mg-btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-tint); }
.mg-btn-danger:hover { background: var(--danger-tint); }
.mg-btn-block { display: block; width: 100%; text-align: center; padding: 10px; font-size: 13px; }

/* Fields */
.mg-field { margin-bottom: 12px; }
.mg-field label, .mg-field legend {
  display: block; font-size: 11px; font-weight: 600; color: var(--text-2);
  margin-bottom: 5px; letter-spacing: .02em;
}
.mg-field input[type="text"], .mg-field input[type="email"], .mg-field input[type="password"] {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); font-size: 13px; font-family: inherit; color: var(--text);
  background: var(--surface);
}
.mg-field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.mg-field-row { display: flex; gap: 12px; }
.mg-field-row .mg-field { flex: 1; }
.mg-field-error { font-size: 11.5px; color: var(--danger); margin-top: 4px; }
.mg-roleset { border: 0; }

/* Invite */
.mg-invite summary { list-style: none; }
.mg-invite summary::-webkit-details-marker { display: none; }
.mg-invite-summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--accent-2);
}
.mg-invite-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mg-invite-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 14px;
  background: var(--accent-tint); color: var(--accent);
}
.mg-invite[open] .mg-invite-summary { margin-bottom: 16px; }
.mg-invite-form { max-width: 520px; }
.mg-role-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-role-opt {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--border-strong); border-radius: 20px;
  font-size: 12px; font-weight: 500; color: var(--text-2); cursor: pointer;
}
.mg-role-opt:has(input:checked) {
  background: var(--accent-tint); border-color: var(--accent); color: var(--accent-2);
}
.mg-role-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.mg-form-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 16px;
}
.mg-hint-inline { margin-top: 0; flex: 1; }

/* Tables */
.mg-table { width: 100%; border-collapse: collapse; }
.mg-table th {
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 10px 8px; border-bottom: 1px solid var(--border);
}
.mg-table td { padding: 14px 10px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 13px; }
.mg-table tr:last-child td { border-bottom: 0; }
.mg-table-dense td { padding: 8px 10px; font-size: 12px; }
.mg-col-num { text-align: right; }
.mg-col-actions { text-align: right; white-space: nowrap; }
.mg-col-actions form { display: inline-block; margin-left: 6px; }

.mg-person-name { font-size: 13px; font-weight: 600; color: var(--text); }
.mg-person-email { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.mg-person.is-deactivated .mg-person-name { color: var(--text-3); }
.mg-you {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); background: var(--surface-3);
  padding: 1px 5px; border-radius: 3px; margin-left: 5px;
}
.mg-structure { font-size: 11.5px; color: var(--text-2); line-height: 1.7; }

.mg-status {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
}
.mg-status-active      { background: var(--accent-tint); color: var(--accent-2); }
.mg-status-pending     { background: var(--surface-3); color: var(--text-2); }
.mg-status-deactivated { background: var(--surface-2); color: var(--text-3); }
/* Something the admin has to act on, e.g. a connection needing reauthorization. */
.mg-status-attention   { background: var(--danger-tint); color: var(--danger); }

/* Role chips in the People table */
.mg-role-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mg-chip {
  display: inline-flex; align-items: center; padding: 3px 9px;
  border: 1px solid var(--border); border-radius: 20px;
  font-size: 11px; color: var(--text-3); cursor: pointer; background: var(--surface);
}
.mg-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Live checkbox state only. Pairing this with a server-rendered class would
   leave an unchecked chip still styled as granted until the form was saved. */
.mg-chip:has(input:checked) {
  background: var(--accent-tint); border-color: var(--accent-tint-2); color: var(--accent-2); font-weight: 600;
}
.mg-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.mg-role-save { margin-top: 8px; }

/* ── The access matrix ──
   The signature element. Roles across, semantic views down, so the grant that
   connects a person to data is a single visible intersection. */
.mg-matrix-scroll { overflow-x: auto; }
.mg-matrix { border-collapse: collapse; min-width: 100%; }
.mg-matrix th, .mg-matrix td { border-bottom: 1px solid var(--border); }
.mg-matrix-corner { width: 40%; min-width: 200px; border-bottom-color: var(--border-strong) !important; }
.mg-matrix-col {
  padding: 0 4px 10px; text-align: center; vertical-align: bottom;
  border-bottom: 1px solid var(--border-strong) !important; min-width: 74px;
}
.mg-matrix-role { display: block; font-size: 11px; font-weight: 600; color: var(--text-2); }
.mg-matrix-count {
  display: block; font-size: 10px; color: var(--text-3);
  font-family: var(--font-num); font-variant-numeric: tabular-nums; margin-top: 2px;
}
.mg-matrix-col.is-unheld .mg-matrix-role,
.mg-matrix-col.is-unheld .mg-matrix-count { color: var(--text-4); }

.mg-matrix-row-head { text-align: left; padding: 12px 10px 12px 0; font-weight: 400; }
.mg-matrix-row-head .mg-mono { display: block; font-size: 12px; font-weight: 600; color: var(--text); }
.mg-matrix-row-label { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.mg-matrix-cell { text-align: center; padding: 8px 4px; }
.mg-matrix-cell.is-unheld { background: var(--surface-2); }
.mg-matrix-cell form { display: inline; }

/* An outline is "not granted", a filled block is "granted". Deliberately a
   square rather than a checkmark: it reads as a cell in a grid, which is what
   it is, and stays legible at this size. */
.mg-grant {
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 1.5px solid var(--border-strong); border-radius: 4px;
  background: var(--surface);
}
.mg-grant:hover { border-color: var(--accent); background: var(--accent-tint); }
.mg-grant:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mg-grant.is-granted { background: var(--accent); border-color: var(--accent); }
.mg-grant.is-granted:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* Semantic view discovery */
.mg-discovered {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px;
}
.mg-discover-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.mg-discover-name { font-size: 12px; font-weight: 600; color: var(--text); min-width: 150px; }
.mg-discover-row input {
  flex: 1; min-width: 130px; padding: 6px 9px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); font-size: 12px; font-family: inherit; color: var(--text);
}
.mg-discover-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

/* Email sharing domains */
.mg-domains { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mg-domain {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 11px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px;
  font-size: 12px; color: var(--text-2);
}
.mg-domain-x {
  background: none; border: 0; cursor: pointer; color: var(--text-3);
  font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50%;
}
.mg-domain-x:hover { color: var(--danger); background: var(--danger-tint); }
.mg-domain-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mg-domain-add { display: flex; gap: 8px; max-width: 400px; }
.mg-domain-add input {
  flex: 1; padding: 7px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); font-size: 13px; font-family: inherit; color: var(--text);
}
.mg-domain-add input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.mg-confirm {
  background: var(--danger-tint); border: 1px solid var(--danger);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
  font-size: 12.5px; color: var(--text); line-height: 1.6;
}
.mg-confirm p { margin-bottom: 10px; }

/* Usage */
.mg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.mg-stat-value { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -.02em; }
.mg-stat-label { font-size: 11px; color: var(--text-3); margin-top: 3px; }

.mg-allowance { margin-top: 20px; }
.mg-allowance-track { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.mg-allowance-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.mg-allowance-fill.is-high { background: var(--danger); }

/* Daily token bars. Plain CSS rather than ECharts: this is not a semantic-view
   widget, and chart_builder.py is the only place allowed to hold ECharts
   config. A 30-bar column chart does not justify bending that. */
.mg-chart { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.mg-chart-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.mg-chart-bar { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 1px; }
.mg-chart-col:hover .mg-chart-bar { background: var(--accent-2); }
.mg-chart-axis {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-3); margin-top: 6px;
}

.mg-kind {
  display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px;
  border-radius: 3px; background: var(--surface-3); color: var(--text-2); margin-right: 6px;
}
.mg-kind.is-llm { background: var(--accent-tint); color: var(--accent-2); }
.mg-activity-detail { color: var(--text-2); font-size: 11.5px; }

/* Invite acceptance / expired link */
.mg-gate { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--bg); overflow-y: auto; }
.mg-gate-card {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 30px 32px;
}
.mg-gate-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.mg-gate-card h1 { font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.mg-gate-lede { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 8px 0 22px; }
.mg-gate-form .mg-btn-block { margin-top: 18px; }
.mg-gate-rules { list-style: none; margin-top: 18px; font-size: 11.5px; color: var(--text-3); line-height: 1.8; }

/* Narrow screens: the rail becomes a horizontal strip rather than disappearing,
   since it is the only navigation between sections. */
@media (max-width: 720px) {
  .mg-page { flex-direction: column; overflow-y: auto; }
  .mg-rail {
    width: 100%; flex-direction: row; align-items: center; gap: 4px;
    padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }
  .mg-rail-eyebrow, .mg-rail-foot { display: none; }
  .mg-rail-link { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .mg-rail-link.is-active { border-left: 0; border-bottom-color: var(--accent); }
  .mg-content { padding: 20px 16px 48px; }
  .mg-card { padding: 16px; }
  .mg-field-row { flex-direction: column; gap: 0; }
  .mg-form-actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-page * { transition: none !important; animation: none !important; }
}


/* ── §14 AUTHENTICATION AND MFA ─────────────────────────────── */
/*
   Sign-in, factor verification, and enrolment share the .mg-gate card from
   §13, so the whole authentication surface reads as one place. The pieces
   below are what those pages add.
*/

.mg-gate-card-wide { max-width: 460px; }
.mg-gate-alert { margin-bottom: 16px; }
.mg-gate-secondary { margin-top: 14px; text-align: center; }
.mg-body-copy { font-size: 13px; line-height: 1.65; color: var(--text-2); margin-bottom: 10px; }

.mg-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--accent); text-decoration: underline;
}
.mg-linkbtn:hover { color: var(--accent-2); }
.mg-linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* One field takes an app code, an emailed code, or a backup code. Spaced and
   oversized because it is typed under pressure, often from a phone screen. */
.mg-code-input {
  font-family: var(--font-mono) !important;
  font-size: 20px !important;
  letter-spacing: .14em;
  text-align: center;
  padding: 11px 10px !important;
}

.mg-trust-opt {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.5;
  margin: 14px 0 4px; cursor: pointer;
}
.mg-trust-opt input { margin-top: 2px; flex-shrink: 0; }

/* Factor choice at enrolment */
.mg-factor-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.mg-factor-form { display: block; }
.mg-factor {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 14px 16px; text-decoration: none;
  font-family: inherit;
}
.mg-factor:hover { border-color: var(--accent); background: var(--accent-tint); }
.mg-factor:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mg-factor-strong { border-color: var(--accent-tint-2); }
.mg-factor-rank {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-2); background: var(--accent-tint);
  padding: 2px 7px; border-radius: 3px; margin-bottom: 7px;
}
.mg-factor-rank-weak { color: var(--text-2); background: var(--surface-3); }
.mg-factor-name { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.mg-factor-note { display: block; font-size: 12px; line-height: 1.6; color: var(--text-2); margin-top: 4px; }

/* TOTP enrolment */
.mg-qr {
  display: flex; justify-content: center; padding: 16px;
  /* Explicitly white, and load-bearing: the generated SVG is a bare path with
     no background of its own, so a scanner's contrast comes from here. */
  background: #ffffff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 14px;
}
/* The SVG declares its own size in mm, which this overrides, so the size here
   is what decides whether the code can actually be scanned. A provisioning URI
   with a 32-character secret is a version 7 QR: 45 modules plus a 2-module
   quiet zone each side, 49 across. At the old 190px that was 3.88 pixels per
   module, under the ~4px floor for scanning off a screen, and fractional, so
   every module straddled a pixel boundary and got anti-aliased into grey.
   Codes scanned on some phones and not others.

   245px holds at or above 4px per module through version 10, which covers a
   much longer email than any address here. crispEdges then stops the browser
   softening the edges when a longer address does push the scale fractional
   again. Do not shrink this to fit a layout. */
.mg-qr svg {
  width: 245px; height: 245px; display: block;
  shape-rendering: crispEdges;
}

.mg-manual { margin-bottom: 18px; }
.mg-manual summary {
  cursor: pointer; font-size: 12.5px; color: var(--accent);
  list-style: none; padding: 4px 0;
}
.mg-manual summary::-webkit-details-marker { display: none; }
.mg-manual summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mg-secret {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 11px; margin-top: 6px;
  font-size: 12.5px; word-break: break-all; color: var(--text); user-select: all;
}

/* Backup codes, shown once */
.mg-codes {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 12px;
}
.mg-codes li { font-size: 13px; color: var(--text); letter-spacing: .04em; user-select: all; }

/* Security section in the admin portal */
.mg-stats-compact { margin-bottom: 20px; }
.mg-stats-compact .mg-stat-value { font-size: 18px; }
.mg-mfa-form { border-top: 1px solid var(--border); padding-top: 18px; }

.mg-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 6px; }
.mg-switch-label { font-size: 13px; font-weight: 600; color: var(--text); }

.mg-factor-choice { margin-top: 16px; }
.mg-factor-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  margin-bottom: 8px; cursor: pointer;
}
.mg-factor-opt:has(input:checked) { border-color: var(--accent-tint-2); background: var(--accent-tint); }
.mg-factor-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.mg-factor-opt input { margin-top: 3px; flex-shrink: 0; }
.mg-factor-opt-body { flex: 1; }
.mg-factor-opt-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.mg-factor-opt-note { display: block; font-size: 11.5px; line-height: 1.6; color: var(--text-2); margin-top: 3px; }

.mg-strength {
  font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px;
}
.mg-strength-strong { color: var(--accent-2); background: var(--accent-tint-2); }
.mg-strength-weak { color: var(--text-2); background: var(--surface-3); }

/* Per-person MFA state in the People table.
   --danger, not --informed: the trust colours mean grounding level everywhere
   else in the product (see §13) and must not pick up a second meaning here.
   An unenrolled person under a required policy is an attention state, which is
   what --danger already signals on alerts and destructive actions. */
.mg-mfa-state { font-size: 11px; margin-top: 5px; }
.mg-mfa-state.is-on  { color: var(--text-3); }
.mg-mfa-state.is-off { color: var(--danger); font-weight: 600; }

@media (max-width: 720px) {
  .mg-codes { grid-template-columns: 1fr; }
  .mg-gate { padding: 16px; }
}
.pin-dialog select { width: 100%; padding: 4px 7px; border: 1px solid var(--border-strong); border-radius: 4px; font-size: 12px; background: var(--surface); }
.pin-dialog-sizes { display: flex; gap: 8px; }
.pin-dialog-sizes label { font-size: 12px; display: flex; align-items: center; gap: 3px; cursor: pointer; }
.pin-dialog-actions  { display: flex; gap: 5px; margin-top: 8px; }
.pin-btn-primary  { padding: 4px 10px; background: var(--accent); color: white; border: none; border-radius: var(--radius); font-size: 12px; font-weight: 600; cursor: pointer; }
.pin-btn-primary:hover { background: var(--accent-2); }
.pin-btn-cancel   { padding: 4px 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 12px; cursor: pointer; }

/* Chat input area */
.chat-panel-input { padding: 8px 10px; border-top: 1px solid var(--border); flex-shrink: 0; }
.chat-panel-input form { display: flex; gap: 5px; align-items: flex-end; }
.chat-panel-input textarea {
  flex: 1;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: inherit;
  resize: none;
  min-height: 36px;
  max-height: 110px;
  line-height: 1.5;
  background: var(--surface);
  color: var(--text);
  overflow-y: auto;
}
.chat-panel-input textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
.chat-panel-input .send-btn {
  padding: 7px 12px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  height: 36px;
  white-space: nowrap;
  flex-shrink: 0;
}
.chat-panel-input .send-btn:hover    { background: var(--accent-2); }
.chat-panel-input .send-btn:disabled { background: var(--text-4); cursor: not-allowed; }

/* Chat metric card (query_for_metric_card inline display) */
.chat-metric-card { padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); display: inline-flex; flex-direction: column; gap: 2px; min-width: 140px; }
.cmc-value { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.1; }
.cmc-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.cmc-comparison { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.cmc-comparison.good .cmc-delta { color: #3ba272; }
.cmc-comparison.bad  .cmc-delta { color: #ee6666; }
.cmc-delta { font-weight: 600; }

/* Chat data grid (query_for_data_grid inline display) */
.chat-data-grid-wrap { max-height: 280px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.chat-data-grid { width: 100%; border-collapse: collapse; font-size: 11px; }
.chat-data-grid th { background: var(--surface-2); padding: 5px 8px; text-align: left; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; }
.chat-data-grid td { padding: 4px 8px; border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.chat-data-grid tr:last-child td { border-bottom: none; }
.chat-data-grid tr:hover td { background: var(--surface-2); }
.chat-chart-error { padding: 8px 12px; font-size: 12px; color: var(--text-3); background: var(--surface-2); border-radius: var(--radius); }

/* ── Email this answer ─────────────────────────────────────────
   Mirrors the pin dialog's visual language so the two share-style
   affordances on a message read as siblings. */
.email-trigger-area { margin-top: 6px; }
.email-trigger-btn {
  font-size: 11px; color: var(--text-2); background: none;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 3px 9px; cursor: pointer;
}
.email-trigger-btn:hover { background: var(--surface-2); color: var(--text); }

.email-dialog {
  margin-top: 7px; padding: 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.email-dialog-row { margin-bottom: 8px; }
.email-dialog-label {
  display: block; font-size: 10px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px;
}
.email-dialog-optional {
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-4);
}
.email-dialog input[type="text"],
.email-dialog textarea {
  width: 100%; padding: 5px 7px; border: 1px solid var(--border-strong);
  border-radius: 4px; font-size: 12px; font-family: inherit; color: var(--text);
  background: var(--surface); box-sizing: border-box;
}
.email-dialog textarea { resize: vertical; line-height: 1.4; }
.email-dialog-hint {
  display: block; font-size: 10px; color: var(--text-4); margin-top: 3px;
}
.email-dialog-actions { display: flex; gap: 5px; margin-top: 10px; }
.email-btn-primary {
  padding: 4px 12px; background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius); font-size: 12px; font-weight: 600; cursor: pointer;
}
.email-btn-primary:hover { background: var(--accent-2); }
.email-btn-primary[disabled] { opacity: .6; cursor: default; }
.email-btn-cancel {
  padding: 4px 10px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-size: 12px; cursor: pointer;
}

.email-result {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12px; padding: 5px 0; line-height: 1.45;
}
.email-result-icon { flex-shrink: 0; font-weight: 700; }
.email-result--ok    { color: var(--verified); }
.email-result--error { color: var(--danger); }