/* Soft direction — shared styles for the supporting screens */

.soft-root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f3efe9;
  color: #1a1917;
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

.soft-topbar {
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.soft-mark {
  width: 32px; height: 32px; border-radius: 10px;
  background: #1a1917; color: #f3efe9;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
}
.soft-nav {
  display: flex; gap: 2px; font-size: 12.5px;
  background: #ebe7dd; padding: 3px; border-radius: 100px;
}
.soft-nav a {
  padding: 5px 12px; border-radius: 100px; cursor: pointer;
  color: #6b6862; text-decoration: none;
}
.soft-nav a[data-active="true"] {
  background: white; color: #1a1917; font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.soft-nav a:hover { color: #1a1917; }
.soft-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.soft-btn {
  border: none; border-radius: 100px; padding: 6px 14px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  font-family: inherit;
}
.soft-btn--ghost { background: white; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.soft-btn--primary { background: #1a1917; color: white; }

.soft-main { flex: 1; overflow: auto; padding: 0 22px 24px; }

.soft-hero {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 4px 0 16px;
}
.soft-eyebrow {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #6b6862; font-family: 'JetBrains Mono', monospace;
}
.soft-title {
  margin: 4px 0 4px; font-size: 26px; font-weight: 500;
  letter-spacing: -0.02em;
}
.soft-sub { color: #6b6862; font-size: 12.5px; }

.soft-tile {
  background: white; border-radius: 20px; padding: 18px 22px;
}
.soft-tile--filled { color: white; position: relative; overflow: hidden; }

.soft-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #6b6862; font-weight: 500;
}

.soft-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.soft-tbl th {
  text-align: left; font-weight: 500; font-size: 10.5px;
  color: #9c9890; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 8px 10px; border-bottom: 1px solid #ebe9e3; white-space: nowrap;
}
.soft-tbl td {
  padding: 11px 10px; border-bottom: 1px solid #ebe9e3;
  vertical-align: middle;
}
.soft-tbl tbody tr:last-child td { border-bottom: none; }
.soft-tbl tbody tr:hover { background: #fbfaf6; }
.soft-tbl .num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; text-align: right; }

.soft-chip {
  width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center; color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 600;
  flex-shrink: 0;
}
.soft-chip--sm { width: 20px; height: 20px; border-radius: 6px; font-size: 8.5px; }
.soft-chip--lg { width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }

.soft-flag { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; }

.soft-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.soft-pill--pos { background: oklch(0.94 0.035 150); color: oklch(0.45 0.12 150); }
.soft-pill--neg { background: oklch(0.94 0.035 28); color: oklch(0.48 0.15 28); }
.soft-pill--neu { background: #f3efe9; color: #6b6862; }

.soft-bar-track {
  flex: 1; height: 6px; background: #ebe7dd; border-radius: 100px;
  overflow: hidden;
}
.soft-bar-fill { height: 100%; border-radius: 100px; }

.soft-mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.soft-muted { color: #6b6862; }
.soft-tiny { font-size: 10.5px; color: #9c9890; }

.soft-main::-webkit-scrollbar { width: 10px; height: 10px; }
.soft-main::-webkit-scrollbar-thumb { background: #d8d4c8; border: 2px solid #f3efe9; border-radius: 100px; }
.soft-main::-webkit-scrollbar-track { background: transparent; }

.soft-seg {
  display: inline-flex; background: #ebe7dd; padding: 3px;
  border-radius: 100px; font-size: 11.5px;
  font-family: 'JetBrains Mono', monospace;
}
.soft-seg button {
  border: none; background: transparent; padding: 4px 11px;
  border-radius: 100px; cursor: pointer; color: #6b6862;
  font-family: inherit; font-size: inherit;
}
.soft-seg button[data-active="true"] {
  background: white; color: #1a1917; font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Loading state */
.soft-loading {
  display: flex; align-items: center; justify-content: center;
  height: 100%; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: #9c9890;
}