/* Shared Topbar Layout
   Single source of truth for:
   - .ta-topbar
   - .ta-topbar-left
   - .ta-topbar-title
   - .ta-topbar-right
   - .topbar-import-inline

   Baseline visuals: Trade Analysis
*/

.ta-topbar{
  --topbar-offset-y: 5px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:4px 0 0;
  gap:16px;
  width:100%;
}

.ta-topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.ta-topbar-title{
  font:800 20px/1.2 var(--font-sans, "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif);
  letter-spacing:.02em;
  min-width:0;
}

.ta-topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
  transform:translateY(var(--topbar-offset-y));
}

.topbar-import-inline{
  display:flex;
  align-items:center;
  gap:6px;
  font:600 11px/1.1 var(--font-sans, "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif);
  opacity:.75;
  transform:translateY(var(--topbar-offset-y));
}

.topbar-import-inline .ta-import-label{
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.55;
  font-weight:600;
}

.topbar-import-inline .ta-import-value{
  font-weight:600;
  letter-spacing:.02em;
  opacity:.70;
  color:#b0c0d4;
}

@media (max-width:640px){
  .ta-topbar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .ta-topbar-right{ flex-wrap:wrap; justify-content:flex-start; margin-left:0; }
}

@media (max-width:1100px){
  .ta-topbar{ justify-content:flex-start; }
  .ta-topbar-right{ margin-left:0; }
}